JavaScript 101: Prototype Chaining

The last post on prototypes was longer than ... well it was long. So I decided to write a new post for prototype chaining, as I felt I needed some rest to digest all these mind bending concepts. Prototype chaining is nothing but a fancy word for inheritance, meaning one object can specialize into another object, with special methods and properties. We will consider the example of Dog (created previously) and let ShowDog (a new object) inherit from it. This is very well illustrated in HFJS. Let's start.

So, what we want to  achieve is, create a ShowDog prototype, which will have special properties and methods, at the same time having all the methods and properties of the Dog prototype. (Dog prototype, not the Dog objects). So, some properties for a ShowDog will be stored in the instance itself (e.g. Name), ShowDog specific methods will be inherited from ShowDog prototype, and the Dog related methods will be inherited from the Dog prototype.

First, we create a ShowDog constructor, which will hold all the object-specific properties:

function ShowDog (name, age, handler) {
    this.name = name;
    this.age = age;
    this.handler = handler;
}

Next, we assign a new, blank Dog object to the prototype property of ShowDog:

ShowDog.prototype = new Dog();

Next, we assign the common valued properties and common methods to ShowDog prototype:

ShowDog.prototype.trick = function() {
    // perform trick
};

ShowDog.prototype.league = "Webville";  // common for all ShowDogs

That's it! We have successfully created a ShowDog prototype that is ready to make ShowDog objects.

var myShowDog = new ShowDog("tito", 4, "aditya");

We can now call trick(), as well as all the Dog prototype methods such as bark(), on myShowDog.

Reusing constructor code
If you observe carefully, the code for Dog's constructor and ShowDog's constructor is same, except for ShowDog specific property, handler. This redundancy can be removed with call() method, to invoke Dog's constructor. So we rewrite ShowDog's Constructor as:

function ShowDog(name, age, handler) {
    Dog.call(this, name, age);
    this.handler = handler;
}

What this function does is, it invokes Dog constructor, and sets the this reference for the constructor to use, to the current ShowDog object. So the Dog constructor builds up all the properties inherited from Dog, and then we handle the ShowDog specific property handler, separately.