Inheritance in JS

In this article I will try to give an introduction to protypal inheritance.

As an "optional" pre-requisite, you can glance at my previous post on "Intro To Prototypes".

Intro To Prototype - Js

Prototype Chain

When it comes to inheritance, JavaScript only has one construct: objects. Each object has a private property (referred to as [[Prototype]] ) which holds a link to another object called its prototype. That prototype object has a prototype of its own, and so on until an object is reached with null as its prototype. By definition, null has no prototype, and acts as the final link in this prototype chain.

In Js, Inhertitance is possible only because of this prototype chain.

Lets look at this with an example. I will try my best to explain the concept of prototypal inhertitance with this example. Initially We will create a student Constructor function, which takes three values first,last and age.

var Student = function(first,last,age){
this.name = {
first,
last
};
this.age = age;
}

Whenever we create a function Js engine creates two object for us,

1. One is the function object itself and
2. Prototype object.

We can use the prototype property created for us by the Js engine using ".prototype" - reference property pointing to the prototype object.

So lets add a function "sayMessage" to the prototype object created for us, by Js engine.

var Student = function(first,last,age){
this.name = {
first,
last
};
this.age = age;
}
Student.prototype.sayMessage = function(){
return "Hello!! "+this.name.first+" "+this.name.last+" your age is "+this.age+"."
}

Lets create an object using the function Student (Constructor).

var studentOne = new Student("dharani","jayakanthan","six");
studentOne.sayMessage();
//"Hello!! dharani jayakanthan your age is six."

The way this works is when we call the "sayMessage" function, Js engine will initially look at the "Student" object. When there is no function in the student object, Js engine will look for the "sayMessage" function in prototype object.

Using call function to inherit

We will now create another function called "Faculty". Which will take the same parameters as "Student" but with an additional formal parameter salary.

var Faculty = function(first,last,age,salary){
Student.call(this,first,last,age);
this.salary = salary;
}

What we are doing in the above code is, we want Faculty constructor to take the same paramaters as Student contructor. So we are inheriting "Student" constructor using the call function, and passing the parameters that "Faculty" constructor inherits from students.

This "call" function basically allows you to call a function defined somewhere else, but in the current context. The first parameter specifies the value of this that you want to use when running the function, and the other parameters are those that should be passed to the function when it is invoked.

When we want to inherit a constructor with no formal parameters, we can do that by same call function. But we need to provide this reference as parameter in call reference.

Ex : "ConstructorWithNoParameter.call(this)".

So that we now have inherited the "Student" constructor. But we havent changed the link of the "Faculty" constructors prototype object. Now the "Faculty" constructors prototype object will have a constructor reference which points back to the constructor itself. So we will not get access to the "sayMessage" function, which we created in "Student" constructors prototype object.

To get the "Faculty" to inherit "Student" prototype object,

• We need to add,

Faculty.prototype = Object.create(Student.prototype);

We now inherited the student prototype, But when you look close into the code
there is one more thing we need to do.

• What we have done is inherited "Student" prototype Object. The "Student.prototype" will have an property called "constructor" which will point back to the "Student" constructor itself.

To verify this, you can add these lines to the code,

Faculty.prototype.constructor;
/*
  function(first,last,age){
  this.name = {first,last};
  this.age = age;
  }
*/
(Student.prototype.constructor === Faculty.prototype.constructor) ? true : false;
//true

To change this reference we point the "Faculty.prototype.contructor" to the "Faculty" function.

Now when you check it will return false,

Faculty.prototype.contructor = Faculty;
(Faculty.prototype.constructor === Student.prototype.constructor) ? true : false;
//false

Now lets put it all together

// Student Constructor
var Student = function(first,last,age){
  this.name = {first,last};
  this.age = age;
  }
Student.prototype.message = function(){
  if(this.salary){
      return this.name.first+" "+this.name.last+" "+"is "+this.age+" years old. And earns "+this.salary;
  }
  else{
      return this.name.first+" "+this.name.last+" "+"is "+this.age+" years old";
  }
  }
var studentOne = new Student("dharani","jayakanthan","20");

// Faculty Constructor
var Faculty = function(first,last,age,salary){
  Student.call(this,first,last,age);
  this.salary = salary;
}
Faculty.prototype = Object.create(Student.prototype);
Faculty.constructor = Faculty();
var facultyOne =  new Faculty("simon","peter","70","820,000");
facultyOne.message();
// simon peter is 70 years old. And earns 820,000
studentOne.message();
// dharani jayakanthan is 20 years old

This is not the only way of create inheriting class.The new ECMAScript features that allow us to do inheritance more easily in JavaScript. But they are not supported very widely by all the browsers yet. Code we discussed in this articles are supported as far back as IE9 or earlier.