Home arrow JavaScript arrow Page 2 - 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 - Prototyping objects: looking at the “prototype” property
(Page 2 of 4 )

Similar to the “constructor” property that was reviewed in the first tutorial, every object constructor exposes a special property called “prototype.” But what is the function of this property? Well, it will allow you to add properties (and methods) to all objects instantiated from that constructor function. Maybe this sounds a little confusing, so allow me to illustrate this concept by an easy example. Have a look at the constructor function below:

function Div(w,h,t,l,p,bg){
    // define object properties
    this.div=document.createElement('div');
    this.w=w+'px';
    this.h=h+'px';
    this.pos='absolute';
    this.top=t+'px';
    this.left=l+'px';
    this.pad=p+'px';
    this.bord='1px solid #000';
    this.bg='#'+bg;
    // define 'display()' method
    this.display=function(){
        this.div.style.width=this.w;
        this.div.style.height=this.h;
        this.div.style.position=this.pos;
        this.div.style.top=this.top;
        this.div.style.left=this.left;
        this.div.style.padding=this.pad;
        this.div.style.border=this.bord;
        this.div.style.background=this.bg;
        document.getElementsByTagName('body')[0].appendChild(this.div);
    }
}

Here, I’ve used the constructor function that you saw in the first tutorial, which comes in handy for building up DIV elements on the fly and appending them to the document tree. After defining the above function, what I’ll do next is use the “prototype” property for assigning a new property to the constructor function, and then create two div objects from the same constructor. Please take a look at the following example:


Div.prototype.margin='2px';
var div1=new Div(300,250,100,100,5,'00f');
div1.display();
alert(div1.margin); // returns ‘2px’
var div2=new Div(200,150,50,50,5,'0ff');
div2.display();
alert(div2.margin); // returns ‘2px’

As I said before, I’ve assigned a new “margin” property to all DIV objects, by using the “prototype” property. Doing so, all the subsequent objects created (or not) from the same constructor will also expose the “margin” property, as the above example demonstrates. Even when this property wasn’t specifically declared inside the constructor function, the corresponding “alert()” methods will display the same property value for each DIV object, instantiated from the same constructor.

As you can see, the “prototype” property allows you to specify object properties outside the constructor function, which will be shared by all the objects instantiated from this function. This condition brings us to an important point for establishing a hierarchical relationship between objects: by using this property, it’s possible to create a base constructor function that contains some basic properties and methods, and then define different objects that inherit (and eventually override) all the properties defined in the base object.

In short, I’m talking about inheritance applied to JavaScript objects, which is really a powerful feature found in most full-blown programming languages. Thus, considering that JavaScript offers support for Inheritance, the next thing I will do is demonstrate how a child object can inherit the properties and methods from a base (or parent) object. Want to see how is this done? Jump straight into the next section to learn more.


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