|
Page 1 of 3
JavaScript Classes
Not only can JavaScript functions contain other functions, but they can also be instantiated. This makes JavaScript functions a good candidate for implementing the concept of a class from traditional object-oriented programming. This is very helpful feature indeed, because JavaScript doesn't support the notion of a class in the classic sense of the word. Functions can be instantiated using the new operator, such as in this example:
var myHelloWorld = new ShowHelloWorld();
This line of code effectively creates an object named myHelloWorld, which represents an instance of the ShowHelloWorld() function. When the object is instantiated, the function code is executed, so creating the object has the same effect as calling ShowHelloWorld() as in the previous examples.
Here are a few facts that will help you port your C# OOP knowledge into the JavaScript world:
- When a function is used as a class, its body code is considered to be the constructor. In classic OOP, the constructor is a special method that doesn't return anything, and that is called automatically when the object is created. The same effect happens in JavaScript when creating an instance of the function: its code executes. A C# constructor is equivalent to the code in the JavaScript function—without including any inner functions (whose code doesn't execute automatically).
.
- In C# constructors can receive parameters, and also in JavaScript. If the code in a function represents the "class constructor", the parameters received by that function play the role of constructor parameters.
.
- Class fields in JavaScript are created and referenced with the this keyword. In a JavaScript function, this.myValue is a public member of the function (class), while myValue is a local variable that can't be accessed through function instances. Also, the local variable is destroyed after the function executes, while class fields persist their value for the entire object lifetime.
.
- Class methods that need to be accessible from outside the class need to be referred to using this as well. Otherwise the inner function will be regarded as a local function variable, rather than a "class" member.
We'll demonstrate these concepts by transforming the ShowHelloWorld() function that you saw earlier into a "real" class. We will:
- Change the name of the function from ShowHelloWorld() to HelloWorld().
.
- Add a parameter named hour to the function's "constructor" so that we tell the class the hour for which we need a greeting message, when instantiating it. If this parameter is passed when creating objects of the class, we store it for future use as a class fi eld. If this parameter is not specifi ed, the current hour of the day should be stored instead.
- The method DisplayGreeting() of the class should not support the hour parameter any longer. Instead, it should display the greeting message depending on the hour field that was initialized by the constructor
NOTE: Why are we changing the name of the function? Remember, OOP is a style of coding, not a list of technical requirements that a language must support. JavaScript is considered an OOP-capable language because it supports an object-based programming style. In the OOP paradigm, a class should represent an entity, and not an action. Since we intend now to use ShowHelloWorld() as a class, we are changing its name to one that reflects this purpose.
|