Explain about prototype inheritance in JavaScript

What is Inheritance?

Inheritance is a feature, where one object can able to access the properties and methods defined in another object.

Inheritance in JavaScript is based on the object prototype.

What is a prototype?

Every function (or) object in JavaScript has a prototype property associated with it. You can add methods, properties to this prototype.

For example, I defined a constructor function Employee like below.

function Employee(firstName, lastName){

  this.firstName = firstName;

  this.lastName = lastName;

}

As you see the definition of Employee function, it takes two arguments firstName, lastName and initialize them.

What if you want to add properties, methods to the constructor function Employee, those are common to all the employees?

You can do this by using the prototype property of the function.

For example, the property organization property is common to all the employee objects.

Employee.prototype.organization = "ABC Corporation";

Employee.prototype.toString = function(){

  return this.firstName + "," + this.lastName + "," + this.organization;

}

As you see above snippet, I added a property ‘organization’, toString method to the Employee function.

HelloWorld.js

function Employee(firstName, lastName){
  this.firstName = firstName;
  this.lastName = lastName;
}

Employee.prototype.organization = "ABC Corporation";

Employee.prototype.toString = function(){
  return this.firstName + "," + this.lastName + "," + this.organization;
}

var emp1 = new Employee("Krishna", "Majety");

console.log(emp1.toString());

Output

Krishna,Majety,ABC Corporation

var emp1 = new Employee("Krishna", "Majety");

When I define an object emp1 from Employee constructor function, emp1 inherits the properties, methods from the Employee prototype.

Prototype Chain

Whenever you are trying to access a property of an object, the process is like below.

a.   If the property found in the object itself, then the property is returned.

b.   If the property not found in the object, then property is checked in the prototype of the class (or) constructor function. If the property found, then it is returned.

c.   If the property is not found in step b, then it is checked in parent prototype. If it is found, then returned, else checks in the parent prototypes until property found or until we reach Object prototype.

Let me explain with an example.

HelloWorld.js

function Employee() {
  this.name = '';
  this.dept = 'Sales and Promotion';
}

Employee.prototype.organization = "ABC Corporation";

function Manager(){
  Employee.call(this);
  this.reportees = [];
}

Manager.prototype = Object.create(Employee.prototype);
Manager.prototype.constructor = Manager;

var obj = new Manager();
obj.name = "krishna";
obj.reportees = [123, 654];

printManagerInfo(obj);

function printManagerInfo(manager){
  console.log("name : " + manager.name);
  console.log("Department : " + manager.dept);
  console.log("organization : " + manager.organization);
}

Output

name : krishna

Department : Sales and Promotion

organization : ABC Corporation

As you see above snippet, I attached organization to as a prototype property to Employee constructor function, Since, Manager prototype is created from Employee prototype, Manager objects can able to access the property organization.

Inherit from an object

In JavaScript, you can inherit from another object.

Example

var bar = Object.create(foo);

In the above statement bar object inherit the properties from foo object.

Find the below working application.

HelloWorld.js

var foo = {
  a : 1,
  b : 100,
  
  printAB : function(){
    console.log("a : " + this.a + ", b : " + this.b);
  }
  
}

var bar = Object.create(foo);
bar.a = 101;

console.log("bar values");
bar.printAB();

console.log("foo values");
foo.printAB();

Output

bar values

a : 101, b : 100

foo values

a : 1, b : 100

‘Object.create()’ method creates a new object, using an existing object as the prototype of the newly created object.

HelloWorld.js

var foo =  {
  a : 10
}

var bar = Object.create(foo);


function printInfo(){
  console.log("foo.a " + foo.a);
  console.log("bar.a " + bar.a);
  console.log("bar.__proto__.a " + bar.__proto__.a);
}

printInfo();

console.log("\nSetting bar.a to 100");
bar.a = 100;  // it creates the variable a in the bar object itself

printInfo();

console.log("\nSetting bar.__proto__.a  to 123");
bar.__proto__.a = 123;
printInfo();

Output

foo.a 10

bar.a 10

bar.__proto__.a 10

Setting bar.a to 100

foo.a 10

bar.a 100

bar.__proto__.a 10

Setting bar.__proto__.a  to 123

foo.a 123

bar.a 100

bar.__proto__.a 123

Own property vs prototype property

Every object in Javascript has two properties.

a.   Own property

b.   Prototype property: This is the property accessible from prototype chain

JavaScript provides ‘hasOwnProperty’ method, it returns true, if the property is owned by the object itself. It returns false for the prototype properties.

Previous                                                 Next                                                 Home