Inheritance in JavaScript

Written by: Nagendra Rao | December 18th, 2015

Category: jQuery

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 Comment

We would love to hear from you and we appreciate the good and the bad.

Comments