Emulating Classes
As stated earlier, JavaScript doesn't use classes, but instead is prototype-based. Nevertheless, what JavaScript can do is emulate classes. Class emulation begins with constructors. You are familiar with constructors in .NET; they are similar in JavaScript, but the big difference is that within the constructor you are able to declare properties for the object.
// ** The Point class ** function Point(x, y) { this._x = x; this._y = y;
this.toString = function() { return "(" + this._x + ", " + this._y + ")"; }
// ********************************************** You can then use the new operator to create a new instance of your Point class.
var pi = new Point(0,0); var p2 = new Point(10,10);
Analyzing the pseudo Point class, you can see how you are able to assign properties to a class. When the new operator is used, a new, empty object is created for the function. It then invokes your method and assigns this object to the this keyword, to which you can add properties. Each instance of the Point class has three properties, _x, _y, and toString(). Now there is a bit of overhead here that you can fix. The toString method should be the same across all instances of the Point class, but in this example it isn't; it is duplicated for each Point class. The solution to this problem is the prototype object. The prototype object is created automatically when you call the new keyword. The prototype object is shared across all objects of the same type (in our case Point) and is used to share properties and methods across all instances. In this example, this is where the toString method should be defined.
// ** The Point class ** function Point(x, y) { this._x = x; this._y = y;
Point.prototype.toString = function() {
return "(" + this._x + ", " + this._y + ")";
The prototype object is the basis behind how you are able to perform inheritance in JavaScript.
You may have noticed that I prefixed the x and y values with underscores. This naming convention is used to emulate private members of a class (and is used in the Microsoft AJAX Library). JavaScript does not have the concept of protection levels; thus, you must use naming to signify this even though there is nothing stopping you from accessing these private properties. You will see this notation more as we progress through this Wrox Blox. Note that even though there are no protection levels, there are ways to encapsulate variables, but this practice isn't typically used in the AJAX Controls you will be creating. See www.crockford.com/javascript/private.html for more information.
You can see that classes in JavaScript (well, the emulation of them) are a bit different from that in the .NET languages. The few last points on JavaScript classes have to do with distinction between the types of properties and methods.
□ Instance Properties — Simply described as data that are distinct between instances. In the Point class's case, the _x and _y values are distinct to each Point object. Instance properties should be defined within the constructor function.
□ Instance Methods — Similar to the instance property, these are methods for the instance. Unlike the instance properties, all of the instances should share the methods. To accomplish this, you add the method to the prototype object as in the Point example. The other item of interest here is how to use instance properties within the method. You may have noticed the this prefix used in the toString() method on the Point class. In JavaScript, the this keyword is required to access these.
□ Class Properties — These are properties assigned to the class itself. Typically, this would be something like a constant, for example, in the built-in Math object there is Math.Pl, which returns the constant value of PI.
□ Class Methods — As you probably guessed, class methods, like the properties, are assigned to the class. These methods don't refer to a specific object (therefore you don't use the this keyword), but operate across instances. To use these, you do not need to instantiate the object (using the new operator). An example of this would be Math.sin() or Date.UTC(), found in built-in JavaScript classes. Coming from a .NET language, you can think of these like static (or Shared in VB.NET) members.
Post a comment