7. Inheritance

Introduction

In traditional way, Inheritance in javascript can be achieved using prototype chaining. The detailed look on prototype chain is explained in the previous chapter, but there is more flexibility needed when it comes to actual inheritance, and this is provided in ECMAScript 5. It is called Object.create().Lets have a detailed look on what it can do.

Object.create()

This method of creating object is very useful when want to create object which need to inherit another object. Let’s look at the below example.

Let’s consider the object

1 var objParent={
2     property1:1,
3     property2:2
4 };

Now, an another object should be created which should inherit objParent, which means all the properties of the parent object should be accessible through child object.

 1 var objChild=Object.create(objParent,{
 2   property:3,
 3   property:4
 4 });
 5 
 6 //all the property of objParent is now accessible
 7 //through objChild
 8 console.log(objChild.property1);
 9 console.log(objChild.property2);
10 console.log(objChild.property3);
11 console.log(objChild.property4);

Here, Object.create accepts the first argument as prototype object. But after object is created, still the prototype of both the objects is undefined. But the prototype relation can be checked using isPrototypeOf function.Like below

1 objParent.isPrototypeOf(objChild); //return true

Inheritance with constructor

Constructor patter can be used to create the object’s with new keyword. Like below

 1 function Shape()
 2 {
 3     this.width=0;
 4     this.height=0;
 5 }.prototype={
 6     print:function(){
 7         console.log('width:'+this.width+' height:'+this.height);
 8     }
 9 }
10 
11 var shapeObj=new Shape();
12 console.log(shapeObj.width);

The above code represents Shape class with properties width and height and method print, now i’m going to create a class Rectangle which inherits Shape. Let’s see how to do that using Object.create.

 1 function Rectangle()
 2 {
 3     //Property Inheritance
 4     //calling super class constructor
 5     //this will attach all the properties belong to Shape class
 6     Shape(this);
 7 }.prototype={
 8     area:function()
 9     {
10         return this.width*this.height;
11     }
12 }
13 
14 //Method Inheritance
15 //this line will clone the Shape's prototype
16 //and attach all the method's to Rectangle's prototype
17 Rectangle.prototype=Object.create(Shape.prototype);
18 
19 var rect-new Rectangle();

Here, property is inherited by calling super class constructor in Rectangle function. and methods of Shape is inherited by creating new object with Object.create with prototype as Shape’s prototype and and attaching it to Rectangle’s prototype.

But one problem is here, when you see the value of Rectangle.prototype.constructor , it points to Shape which is not correct, so one more line need to be added.

1 Rectangle.prototype.constructor=Rectangle;

Now, the above statement make sure that all the objects created with Rectangle(), their constructor is pointing to Rectangle object and not Shape object.

That concludes the inheritance in javascript !