Prototype Chaining    

The Prototype chaining is linking of object's prototypes in JavaScript, by implementing inheritance. Every object in javascript has internal link to another object of it’s own called prototype. This prototype is in turn linked to another prototype till the default prototype of Object is reached. The Object is linked to null as prototype suggesting end of prototype chain. 

Reaching a property in object is done through the prototype. If a property is requested by an object and is not present in it’s class, the prototype chain is searched till the property is reached or null is reached. This is effective implementation of inheritance.

Consider an inheritance example below. Animal is a class with eat() and intelligence as method and property. Define the method using prototype. A child class called WildAnimal is created for this class which inherits all properties of Animal class and constructor set to WildAnimal class. Add live() function and name property in WildAnimal class.

Pictorial representation of prototype chaining of below example is as below. __proto__ refers to prototype of the object.

Prototype chaining in JavaScript

 

 

 

 

We create an instance of WildAnimal (Lion) and call eat() function defined in Animal, it searches in WildAnimal prototype for the method. If it is not found, it reaches Animal prototype and returns result. 

Example of prototype chaining

Prototype of an object can be got using Object.getPrototypeOf(object) and can be set to other prototype using Object.setPrototype(object, newPrototype).

Example Object.getPrototypeOf and Object.setPrototype

document.write(Object.getPrototypeOf(WildAnimal) === Object);//returns false

Object.setPrototypeOf(WildAnimal, Object);

document.write(Object.getPrototypeOf(WildAnimal) === Object);//returns true

Inheritance

Constructor Inheritance

Every object in JavaScript has a prototype. It inherits all the properties of the parent class with constructor as a single own property. When we define a constructor MyConstructor():

function MyConstructor(){

      //Code goes here.

}

JavaScript creates a constructor with following settings by default:

MyConstructor.prototype = Object.create(Parent.prototype, {
    constructor: {
        configurable: true,
        enumerable: true,
        value: MyConstructor,
        writable : true   
    }
});

Hence any object is a sub-type of Object by default. But when we inherit a user-defined object from it’s parent, it’s prototype will be changed. Consider the code in above example:

The WildAnimal prototype is created from Animal prototype. Hence the constructor of WildAnimal is also overwritten with that of Animal. 

When there are child classes whose constructor is different from parent class (because of passing of arguments or number of arguments passed) it will throw an error during object creation. To change the prototype chain, such that initialization in constructors are not hindered by inheritance, we restore the constructor property. Hence we add the line WildAnimal.prototype.constructor = WildAnimal; in code. Now, these steps are equivalent to:

WildAnimal.prototype = Object.create(Animal.prototype, {
    constructor: {
        configurable: true,
        enumerable: true,
        value: WildAnimal,
        writable : true   
    }
});

Example of constructor inheritence in JavaScript

function WildAnimal(name){
    //Call parent constructor, constructor stealing
    Animal.call(this);
    //Initialize this class properties
    this.name = name;
}
//Create child class object that inherits properties from parent class.
WildAnimal.prototype = new Animal();
//Set constructor to refer to child class.
WildAnimal.prototype.constructor = WildAnimal;

Prototypal Inheritance

This method of inheritance does not involve strictly defined constructors. This was introduced by Douglas Crockford. In this inheritance, an object() function  is created which creates an empty constructor and assigns the input object to it’s prototype. The constructor is returned as a new instance of the object. Basically, object() creates a constructor which returns new instance of any object passed to it, without the need for defining custom types. This way, the object is initially passed to object() which is the parent object or the base object. Resulting object can be modified or information fields can be added which is actually the child class.

In the example below, object() is the function which returns the new instance of constructor for any object passed to it.The school2 initially sends education as base class to it. When school and students are added from school2, it gets appended to already existing education class. When school3 is created and data gets added, it gets the prototype value of education and school2. This code created two classes similar to each other.

NOTE: This inheritance is useful when we do not create separate constructors but still we want to the objects to behave similarly to one another. The properties containing reference values will share the values.

Example of prototypal inheritence

Combination Inheritance

It is also called a pseudoclassical inheritance. It uses prototype chaining to inherit properties and methods on the prototype, constructor stealing (calling parent class constructor in child class using call() or apply()) to inherit instance properties. It reuses the methods defined on the prototype and allows each instance to have it’s own properties. It is the most commonly used inheritance method in JavaScript. We can use instanceof() and isPrototypeOf() behavior to get it’s object type.

In the example below, Cabinet is the super-class with property budget and method getBudget. Transport class inherits Cabinet properties by call() function. It passes the budget property. The Transport prototype is assigned to Cabinet and method massTransport is defined. Hence when the instance of Transport is created it can access all the properties and methods of parent class and it’s own class also.

Example of combination inheritence

 

›› go to examples ››