Inheritance In JavaScript

In my previous blog I had discussed about creating Objects in JavaScript. As we know JavaScript is a class-less language,so in this blog I will discuss about how Javascript supports inheritance at Object level. Javascript supports prototypical inheritance instead of regular classical inheritance.

Now lets discuss about two important concepts of prototypical inheritance in JavaScript, i.e __proto__ and prototype.

prototype
prototype is a property belonging only to functions. It is used to build __proto__ when the function happens to be used as a constructor with the new keyword.

__proto__
It is a property that all objects have and  pointing to its prototype. This is the property which is used by the JavaScript engine for inheritance. __proto__ is the actual object that is used in the lookup chain to resolve methods.According to ECMA specifications it is supposed to be an internal property, however most vendors allow it to be accessed and modified.

Ex:

function Point(x, y) {
   this.x = x;
   this.y = y;
}
var myPoint = new Point();
console.log(myPoint.__proto__ === Point.prototype); //true
console.log(Point.__proto__ === Function.prototype);  //true

Here Point is a constructor function, it builds an object (data structure) procedurally.
As myPoint is an object constructed by Point(), so Point.prototype gets saved to myPoint.__proto__ at the time of object creation.Point is a constructor function,so it has a prototype property.In javascript functions are also treated as objects,
So Function.prototype gets saved to Point.__proto__   at the time of creation of the function.

CaptureNow lets discuss about how we can inherit objects in JavaScript using prototypical inheritance.

Inheriting a Object created using Object literal syntax:

Object.create():

Douglas Crockford created the Object.create() method, which is used in a fundamental way to implement inheritance in Javascript.The crux of the matter with this Object.create method is that we pass into it an object that we want to inherit from, and it returns a new object that inherits from the object we passed into it.

Ex:

var Point = {x:4 , y:5};
var ColorPoint = Object.create(Point);
ColorPoint.color = "Red";
console.log(ColorPoint.__proto__ === Point);  //true  
console.log(Point.__proto__ === Object.prototype); //true

This creates a new object named ColorPoint by inheriting the properties of Point object and added a new property called ‘color’. Object.create() method simply sets the __proto__ property of ColorPoint object to Point object. This is called as prototypical inheritance.

Inheriting a Object created using constructor function:

In this case to implement inheritance we will write our own custom function named inheritPrototype(childObj,parentObj) which will accept the child and parent object as function parameter and will set the childObject prototype to parentObject’s prototype, so that child object can inherit everything from parent object. Let’s see how we can do this.

Ex:

// constructor of Point object
function Point(x,y){
    this.x = x;
    this.y = y;
}
Point.prototype = {
    dist: function(){
        return Math.sqrt((this.x*this.x)+(this.y*this.y));
    },
    toString: function(){
         return "("+this.x+", "+this.y+")";
    }
}

Here we have created Point Object’s constructor and added to methods to its prototype. These two methods will be shared by all the instances of Point Object.

// constructor of ColorPoint Object
function ColorPoint(x, y, color) {
    Point(this, x, y);
    this.color = color;
}
inheritPrototype(ColorPoint,Point);

Here inside ColorPoint constructor we are calling to Point object constructor to set the properties for x any y and then added a new property named Color. Finally, we are calling inheritPrototype method to inherit the methods from Point object to ColorPoint.

function inheritPrototype(childObject, parentObject){

    // so the copyOfParent object now has everything the parentObject has 
    var copyOfParent = Object.create(parentObject.prototype);

    // we are manually setting the constructor of copyOfParent object to childObject,as in the next step we will override the prototype
    of the childObject with copyOfParent.
    copyOfParent.constructor = childObject;

    // we set the childObject prototype to copyOfParent, so that the childObject can in turn inherit everything from copyOfParent 
    (from parentObject).
    childObject.prototype = copyOfParent;
}

inheritPrototype() simply set the the prototype of ColorPoint to Point object’s prototype, so it inherits its methods.

var p = new Point(3,4);
var p1 = new ColorPoint(5,6,"red");
console.log(p.toString());
console.log(p1.toString());

I hope this helped you to understood at least the general concepts of Inheritance in JavaScript.Comment if you have any doubts.

Advertisements