Object-Oriented JavaScript: Using the `Prototype` Property - Object interaction in JavaScript: applying Inheritance through the “prototype” property
(Page 3 of 4 )
In order to demonstrate how Inheritance can be properly applied to JavaScript objects, first I’ll define a base Div object, which will expose properties similar to those shown in previous examples. Then I’ll use this base object to create two additional Div objects. As you’ll see in a few moments, this couple of objects will use the “prototype” property for inheriting all the properties and methods of the base object.
Of course, this will be understood best by looking at example, so here’s the corresponding definition for each relevant Div object:
// define DivA object
function DivA(){
// define object properties
this.div=document.createElement('div');
this.width='400px';
this.height='300px';
this.position='absolute';
this.top='10px';
this.left='10px';
this.padding='5px';
this.border='1px solid #000';
this.backgroundColor='#f00';
// define 'display()' method
this.display=function(){
this.div.style.width=this.width;
this.div.style.height=this.height;
this.div.style.position=this.position;
this.div.style.top=this.top;
this.div.style.left=this.left;
this.div.style.padding=this.padding;
this.div.style.border=this.border;
this.div.style.background=this.backgroundColor;
document.getElementsByTagName('body')[0].appendChild(this.div);
}
}
// derive a child object from DivA object
function DivB(){
// define object properties and override parent properties
this.width='500px';
this.height='200px';
this.position='absolute';
this.top='20px';
this.left='20px';
this.padding='10px';
this.border='2px solid #0f0';
this.backgroundColor='#00f';
}
DivB.prototype=new DivA();
// derive another child object from DivA object
function DivC(){
// define object properties and override parent properties
this.width='400px';
this.height='300px';
this.position='absolute';
this.top='50px';
this.left='70px';
this.padding='5px';
this.border='2px solid #0ff';
this.backgroundColor='#f0f';
}
DivC.prototype=new DivA();
After having defined the base “DivA” object, along with the additional “DivB” and “DivC” objects, let’s dissect the code for the above example and see how Inheritance is implemented in each case. The first thing to notice here is that the corresponding constructor functions for the “DivB” and “DivC” objects override some properties originally declared by the constructor of the base “DivA” object, and set up new values for each pertinent property, including “width”, “height”, “padding”, “border” and so forth.
So far, the example is pretty straightforward and easy to follow. However, let’s pause for a moment and stop at the following lines:
DivB.prototype=new DivA();
DivC.prototype=new DivA();
In fact, this is where inheritance takes place. The two lines above use the “prototype” property for inheriting all the properties and method declared in the base “DivA” object. As you can see, this process is simply performed by assigning a “DivA” object to each of the “prototype” properties exposed by the “DivB” and “DivC” objects respectively.
As shown above, the concept of inheritance is really powerful, since it allows you to define a base object, by encapsulating most of generic methods and properties inside the constructor function. You can then create as many child objects as needed, which will implement a specific functionality and behavior, according to the requirements of a given application.
Now, by returning to the example shown above, let me show you the code responsible for instantiating some “Div” objects. It’s as follows:
// apply inheritance to Div objects (use prototype property)
var div1=new DivA();
div1.display();
var div2=new DivB();
div2.display();
var div3=new DivC();
div3.display();
If you run the above snippet, three different DIV elements will be displayed on the browser. Certainly this isn’t shocking news, but what the example actually demonstrates is that each derived “Div” object, that is “DivB” and “DivC” respectively, have nicely inherited all the properties from the base “DivA” object, as well as its “display()” method. Definitely, inheritance is a truly powerful feature that can be properly exploited in large scripts, where the hierarchical relationship between base and derived objects can be clearly defined.
Now that you know how to use inheritance with the handy “prototype” property found on user-defined and native JavaScript objects, it’s time to move forward and have a look at some useful JavaScript built-in methods, which come in handy for traversing the properties of a given object. Therefore, keep reading to find out how you can do this.
Next: Traversing object properties: using the “for in” loop structure >>
More JavaScript Articles
More By Alejandro Gervasio
/ 13 
