Prototype Chains

You can also build up chains of prototype objects and this is where the mechanism starts to look like classical inheritance.

The rule is that if you set the prototype to be an object that was created by a constructor then it too has a prototype object. This can create a chain of prototype objects and each one will be searched in turn for any properties or methods that cannot be found earlier in the chain. 

This is a simple idea but it can be difficult to follow when you first encounter it:

if the property or method isn't defined on the current object (even if it is a prototype object) and if it was created using a constructor then seek the property or method on the constructor's prototype object.

This implies that if the prototype object doesn't support the property or method then its prototype will be searched and so on.

So, for example, we can create a new object constructor with a new method:

var myObject2Constructor = function () {
   this.myProperty = 0;
   this.myMethod2 = function () {
      alert("mymethod2") };
   }

Now we can define the original object constructor's prototype to be an instance of this new object:

myObjectConstructor.prototype =
             new myObject2Constructor();

If you now try and use myMethod2 in the original object the call is passed on to the prototype object:

var myObject=new myObjectConstructor();
myObject.myMethod2();

This all works and notice that there is no prototype chain involved, instead the constructor's prototype object provides the method directly.

Now let's move the definition of myMethod2 into a prototype object for the myObject2Constructor:

var myObject2Constructor = function () {
    this.myProperty = 0;
   }
            myObject2Constructor.prototype.myMethod2=
    function () { alert("mymethod2"); };

Notice that now myMethod2 does not belong to the object constructed by myObject2Constructor, but to its prototype object.

Now when you call mymethod2 on myObject:

var myObject=new myObjectConstructor();
myObject.myMethod2();

it fails to find myMethod2 as a method of myObject. It then looks at the prototype object, an instance of myObject2, and fails to find it there. It then looks at myObject2's constructor's prototype object and finds it.

Extending Objects

This all seems complicated at first, but as long as you follow some simple rules it eventually begins to seem very easy. In particular the prototype mechanism can be used to create new objects from old. You can think of this as classical inheritance if you want to, but there is no implied type hierarchy - we just take what is needed from existing objects and add to it as required.

Notice that nothing new is introduced in this section it is just an example of how to think about using a prototype to create new objects from old.

Suppose you have a constructor for an object myObject1 and you want to create a constructor for an object myObject2 that does the same sort of thing but has some different methods or properties.

For example, suppose the original object is:

var myObject1Constructor=function(){
 this.myProperty=0;
} myObject1Constructor.prototype.myMethod1=
   function () { alert("myMethod1"); };

That is, it has one property and one method defined with in its prototype object.

To derive a constructor for a new object, first define the constructor for your new object complete with any additional methods or properties that it needs and ignore the original object:

var myObject2Constructor = function () {
   this.myMethod2 = function (){
       alert("myMethod2") };
      }

Next define a new instance of the original object to be the prototype object of the new constructor:

myObject2Constructor.prototype =
            new myObject1Constructor();

At this point the new object myObject2 has all of the properties and methods of the myObject1 courtesy of the prototype mechanism.

Now you can also add new methods and properties to this new prototype object without fear of modifying the original object's prototype. For example:

myObject2Constructor.prototype.myMethod3=
   function () { alert("myMethod3") };

Now we can create a new object myObject2:

myObject2 = new myObject2Constructor();

and it has three methods:

myMethod2 is defined only on the new object

myMethod3 is defined only for the new object but on the constructor's prototype object

myMethod1 is "inherited" from the original object via its prototype object

If you set the a constructor's prototype object to the a new instance of an object then the object that the constructor creates is equipped with all of the methods and properties of the prototype object.

That's really all there is to it.

You don't need classes or type based inheritance. The constructor's prototype mechanism lets you suck all of the methods and properties of an existing object into a new object. With a little work you can create objects that are mix-ins of multiple existing objects. It is all a matter of creating the right prototype object.

Comments

Make a Comment or View Existing Comments Using Disqus

or email your comment to: comments@i-programmer.info

To be informed about new articles on I Programmer, subscribe to the RSS feed, follow us on Google+, Twitter, Linkedin or Facebook, install the I Programmer Toolbar or sign up for our weekly newsletter.

<ASIN:0980285844>

<ASIN:0596805527>

<ASIN:0321700953>

<ASIN:0596517742>

<ASIN:0470647833>