Javascript Jems - The Prototype
Written by Ian Elliot   
Monday, 04 October 2010
Article Index
Javascript Jems - The Prototype
Prototype properties
Dynamic Javascript

 

Banner

 

So to implement the setPoint method as part of the prototype object you would first declare the Point constructor function with the two properties and without the method:

function Point(){
this.x = 0;
this.y = 0;
};

Next you would define the method as part of  the Point function's prototype object:

Point.prototype.setPoint = function(x, y){
this.x = x;
this.y = y;                             
};

Notice the use of this just as if the function was being executed in the context of an object. This is perfectly fine as the at this stage the function is not being executed just stored in the prototype object and so this hasn't even got a value as yet.


Also notice that the prototype property has to be defined outside of the function definition. You can't access the function object, its properties and methods, within a function definition.

 

 

Now we can use setPoint just as if it was defined as part of a point object. For example:

var Points=new Array(10);
for(var i=0;i<10;i++){
 Points[i] = new Point();
 Points[i].setPoint(i,i);
};
alert(Points[5].x);

still works even thought setPoint isn't defined in Point. What happens is when Javascript tries to execute:

Points[i].setPoint(i,i);

it immediately discovers that setPoint is not defined within Point[i]. So applying the rule given earlier it gots to the constructors prototype property. That is Point.prototype and tries to use its setPoint method i.e. it calls:

Point.prototype.setPoint(i,i);

The behind the scenes call is made in the context of the Point[i] object and so this is correctly set to reference the properties of the Point[i] instance.

Notice that even if you create 10,000 Point objects just once copy of the setPoint method exists as a method of the Point.prototype object. All of the instances of the Point object use this one copy of the method.

Notice that this is nothing to do with a static method as encountered in class oriented languages - in fact as a static method is a method that belongs to a class and not an object it can play no part in Javascript's approach to objects.

A Prototype property

You can define a prototype property just as easily as a prototype method although there is little reason to do so from the point of view of efficiency. There are some tricky ways of using the prototype properties to add additional properties and methods to Javascript supplied objects so they are useful - see later.

For example:

function Point(){
this.x = 0;
this.y = 0;
};
Point.prototype.setPoint=function(x, y){
this.x = x;
this.y = y;                              
};

Point.prototype.z=0;

Now the prototype object has a method and a property z. If you try to use a z property then it will be accessed on the prototype object. That is:

alert(Points[5].z);

will display zero the value stored in the z property of Point.prototype.z.

This might seem like a saving in storage and it is.

All of the point objects have a z property but they are all the single z property of the prototype object. Now consider what happens when you store something in a property provided by the prototype object:

var Points=new Array(10);
for(var i=0;i<10;i++){
Points[i] = new Point();
Points[i].z=i;
Points[i].setPoint(i,i);
};

If you try this out and examine what is stored in each of the elements of the array you will discover that in each case z holds a different value.

How can this be as there is only one prototype.z  property?

If you look at the code and remember how Javascript works then the answer should be obvious.

When you use a property that doesn't exist within an object such as:

Points[i].z=i;

then the property is automatically created.

Banner

<ASIN:0596805527>

<ASIN:0470684143>

<ASIN:0137054890>

<ASIN:1449381871>



Last Updated ( Monday, 18 October 2010 )