Close

December 18, 2015

Inheritance in JavaScript

Introduction to Prototype:

Prototype? Why this sudden change of topic? Not really! In javascript, inheritance is

implemented through prototype, unlike other oop languages (for example, java, c++)

where its class based inheritance.

What is Prototype in JavaScript?

A Prototype is a property that every object in JS possesses, it’s not set for a new object

which does not inherit from another object. (new Object(); will give you a plain object

with no inherited properties/ methods)

It is the property which links an object to its prototype (internally) and so on, this

chaining can go on until a prototype with null value is found, which marks the end of

this prototype chain.

Achieving inheritance through prototype property:

We can inherit properties and methods through prototype property,

Inheriting properties:

When trying to access a property of an object, the property will not only be sought on

the object but on the prototype of the object, the prototype of the prototype, and so on

until either a property with a matching name is found or the end of the prototype chain

is reached.

Example:

Let’s say we have an object o with 2 properties, a and b.

var o = {

a: 1,

b: 2

}

and let’s say this object o’s prototype has 2 properties, b and c

o.prototype = {

b: 3,

c: 4

}

Now, the prototype chain looks like this,

{a:1, b:2} ­­­> {b:3, c:4} ­­­> null

Let’s try accessing values stored in these properties,

console.log(o.a); // 1

a is found on object o itself and there is no need to traverse through the chain.

console.log(o.b); // 2

b is also found on object o itself and so the search ends here, note that the prototype of o

also has a property b, which is never reached! This is called property shadowing

console.log(o.c); // 4

Property c is not found on object o and, therefore, the search is carried on to its

prototype, the object o’s prototype has c with value defined as 4.

Now let’s try accessing something which is not there,

console.log(o.d); // undefined

The search starts at o, where d is not found, carries down to its prototype and then to its

prototype (which is null) d is nowhere defined and hence it returns undefined.

Inheriting Methods:

In JavaScript, functions can be defined as properties of an object. And they act just like

properties of inheritance explained above.

Example:

var School = function(name, state) {

this.name = name;

this.isOpen = state;

}; //defining a function and storing it in an object called School

School.prototype.status = function() {

if (this.isOpen) {

console.log(this.name + ‘ is open!’);

}

};

Horizon = new School(‘Horizon’, true); // Creating a new School Object

Horizon.status(); // Horizon is open!

Here ‘Horizon’ object itself doesn’t have ‘status’ method defined, hence the search is

done on its prototype where its definition is found.

Conclusion:

You must know prototypal inheritance model of JavaScript in order to write complex

code which involves inheritance. Also, keep in mind the length of the prototype chains,

too much chaining might have an adverse effect on performance.

Further reading:

Object.prototype

Inheritance and Prototype chaining

Leave a Reply

Your email address will not be published. Required fields are marked *