Once we got the basic information and know how, of the “prototype” property of a constructor object, we need some code to test it. So here is another all in one page test for the “prototype” property.
We have 3 constructors and then the prototype property of the constructors are defined as another object. Basically, if 3 constructors namely A,B,C are present, prototype of A is defined as an object created by “new B()”, prototype of B is defined as an object created by “new C()”. There are 4 different properties in all the objects. But the relationship is now as below
A.prototype is new B();
B.prototype is new C()
//so the relation is as below
A -> B -> C
That means, “prototype” allows us to make a relation between the objects. We will see that in a moment. Now all the properties of all the objects can be accessed through the object created by “new A()”.
If you have not yet opened the all in one page test for this example, open it now. And click the buttons to see the properties accessed from one Object.
var ClassA=(function(){
//------define-------
var a,b,c,d,getA,getB,getC,getD,numberToBeAdded;
//------configure------
a='Property a';
b=500;
c='Property c';
d='Property d';
//numberToBeAdded=100;//prototype object can not access this property, instead the local property will be used
this.numberToBeAdded=100;//With the use of "this" now its exposed to be accesed from its prototype object
//------expose-------
this.getA=function(){
return a;
}
this.getB=function(){
return b;
}
this.getC=function(){
return c;
}
this.getD=function(){
return d;
}
//
/*
this.getSum=function(userNumber){
return userNumber+numberToBeAdded;
}
*/
});
//
var ClassB=(function(){
//------define-------
var e,f,g,h,getE,getF,getG,getH;
//------configure------
e='Property e';
f=9;
g='Property g';
h='Property h';
//numberToBeAdded=200;
//------expose-------
this.getE=function(){
return e;
}
this.getF=function(){
return f;
}
this.getG=function(){
return g;
}
this.getH=function(){
return h;
}
//
/*
this.getSum=function(userNumber){
return userNumber+numberToBeAdded;
}
*/
});
//
var ClassC=(function(){
//------define-------
var i,j,k,l,getI,getJ,getK,getL,getSum,numberToBeAdded;
//------configure------
i='Property i';
j=300;
k='Property k';
l='Property l';
numberToBeAdded=300;//"this" exposes this number to be overriden by the object which will prototype ClassC(or this class)
//------expose-------
this.getI=function(){
return i;
}
this.getJ=function(){
return j;
}
this.getK=function(){
return k;
}
this.getL=function(){
return l;
}
//
this.getSum=function(userNumber){
//return userNumber+numberToBeAdded;
return userNumber+this.numberToBeAdded;//using "this" will override the local property and use the property of the object which would be using this object as a prototype
}
});
The code to use the prototype is defined as
//makes the object
var objC=new ClassC();
//makes the prototype magic
ClassB.prototype=objC;
ClassB.constructor=ClassB;
//makes the object
var objB=new ClassB();
//objB.constructor.prototype=objC;
//makes the prototype magic
ClassA.prototype=objB;
ClassA.constructor=ClassA;
var objA=new ClassA();
So how it works?!! This magic is simply possible by “prototype”. For example, if we are trying to access one property in an object created by “new A()” and the property is not present in the Object, then javascript engine will look for the property in the “prototype” object of “new A()” and that in our case is an object created by “new B()” and if the property is not found in it, it will search in the prototype property object defined for this object, that is in our case is an object created by “new C()”.
The code below shows, how we are accessing properties from the prototype object through the single object.
//calling own method
objA.getA();
//calling B's method
objA.getE();
//calling C's method
objA.getJ();
If you go through the code here, you must see that there is the use of the key word “this”. This is simply kind of saying that this property is accessible from outside. In Java or Actionscript kind of languages, its known as “public” variables. Remember that, whatever variables need to be exposed to outside, must be defined with the keyword “this”. Going through the code again will show you that, some properties are just defined with “var”, while some other are defined with “this”. Remember, “this” always points to the current object.
Now with these knowledge, we can very well override or reassign values to our objects, which are defined in the prototype object. That means, if some properties are defined in our “prototype” object and they are exposed or public variables, then we can again define the same variables in our Object and our object variables will be used for calculations. This is very interesting and sometimes get some time to understand too. Again, coming back to code, we have a function in our “prototype” object which adds some numeric value to another given number. Both the actual object and “prototype” object have got the value, which needs to be added. But if the prototype value is exposed with “this” then only the value inside function, which calls this variable with “this” will take actual value from the object not the value from the prototype! Thats because, “this” always refers to the current object.
Here is the source code for this example.
Hope that helps someone. Would love to listen comments, suggestions and insights, as I am still learning it.
