Home arrow JavaScript arrow Page 3 - Object-Oriented JavaScript: Using the `Prototype` Property
JAVASCRIPT

Object-Oriented JavaScript: Using the `Prototype` Property


In this second part of this series, Alejandro Gervasio shows the correct implementation of the "Prototype" property, and how to use it to apply inheritance to many objects of the same family type.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 50
December 05, 2005
TABLE OF CONTENTS:
  1. · Object-Oriented JavaScript: Using the `Prototype` Property
  2. · Prototyping objects: looking at the “prototype” property
  3. · Object interaction in JavaScript: applying Inheritance through the “prototype” property
  4. · Traversing object properties: using the “for in” loop structure

print this article
SEARCH DEVARTICLES

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.


blog comments powered by Disqus
JAVASCRIPT ARTICLES

- Project Nashorn to Make Java, JavaScript Wor...
- JavaScript Virus Attacks Tumblr Blogs
- Google Releases Stable Dart Version, JavaScr...
- Khan Academy Unveils New JavaScript Learning...
- Accessing Nitro? There`s an App for That
- JQuery 2.0 Leaving Older IE Versions Behind
- Fastest JavaScript Engine Might Surprise You
- Microsoft Adjusting Chakra for IE 10
- Brendan Eich: We Don`t Need Google Native Cl...
- An Overview of JavaScript Statements
- An Overview of JavaScript Operators
- Overview of JavaScript Variables
- More of the Top jQuery Social Plugins
- The Top jQuery Social Plugins
- More of the Top jQuery Slider Plugins

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2018 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials