As per our "Anything on…" slogan, there are numerous ways we can define properties and methods for a class. This flexibility is more helpful in the implementation of bulky script animation, drag n drop, etc. But for a normal UI validation and business entity manipulation we have to follow a discipline. This will enable us to maintain and enhance a JavaScript code in long-time manner.

Firstly, let us see the different ways to define a class.

Object Declaration

Way 1

See the code snippet 1.

function Point(x, y)

{

this.x = x;

this.y = y;

this.toString = function(){return "(" + this.x + "," + this.y + ")";}

}

var point = new Point(10, 5);

alert(point.toString()); //shows (10,5)

Code Snippet 1

Figure 1 explains the nature of this approach.

A class named "Point" is defined with two properties (x and y) and a method "toString()". All the definitions are bundled within "Point" constructor. But technically, there are two issues with this approach; both make this approach as not optimal:

• Each instance of Point class will have its own copy of members (x, y and 'toString()'). It is feasible for "field" declarations, but harmful for "method" declaration. Each instances has their own copy of code for "toString()".
• The arguments of above constructor (x and y) are global to all members. Yes, toString() can access the arguments "x" and "y". Is it optimal?

Way 2

As we know that "new" operator in JavaScript enables us to create instance of a class. The function followed by "new" means that it acts as a constructor for the class. The declaration and initialization are happened in the same place as like code snippet 1. Also, JavaScript does the more work. The lifecycle of an object creation is depicted in figure 2.

1. Point class is declared and defined.
2. An object of Point is created.
3. JavaScript, creates "prototype" object with "constructor" property refers the Point constructor and add this as a property of point instance.
4. If we defined Point as specified in code snippet 2, all the prototype specific members are initialized and added to point instance's prototype member.

In figure 2, upto point 3, there is no different between way 1 and way 2. After instantiating Point with "new", JavaScript add an object "prototype" to the instance "point" as property. By default, "prototype" object has a property named "constructor". Whenever, prorotype is initiated, it assigns the corresponding object's constructor function to its "constructor" property.

If we define the Point class properties and methods in its prototype object, then it can be sharable. That is, each instance has separate "property" values and share same function point. See code snippet 2.

Point = function(x, y)

{

this.x = x;

this.y = y;

};                 

Point.prototype.toString = function()

{

return "(" + this.x + "," + this.y + ")";

}

Code Snippet 2

We can refactor code snippet 2 to create more discipline in the next article.