DEV Community

Cover image for Prototype Inheritance in Javascript
Bhavesh Daswani
Bhavesh Daswani

Posted on

Prototype Inheritance in Javascript

There are two main pillars of javascript

  • Closure
  • Prototypal Inheritance

For Closure, you can check my blog on https://rebrand.ly/javascript-closures-9d89f
Let's understand Prototype inheritance with a basic example as simple Example makes understanding topics easier.

Alt Text

Here I created variable two variable a,b which is an array and then try to concat them using a.concat(b).You will be thinking where is prototypal inheritance here in the example. It is there, a variable does not have concat method and then also a.contcat(b) is working but how, because of prototypal inheritance. Variable a has a special property __proto__ which is pointing to Array and the Array has the concat method, so it's working.

Alt Text

I am again using a simple example as it explains the core concept very easily. Here I want you to understand the prototypal chain. In this example, I have created the variable a that is an array. I am using a method a.toString() which is not a property or method of the variable a so how does it resolve let's understand. If the javascript engine can not find a property or method in the main variable then it will look the __proto__ property. __proto__ property will points to its parent here which is Array, now the javascript engine will look in the Array and try to find the toString method which is not available in Array, Array also has __proto__ property which points to base Object(I will explain what is base Object). Now the javascript engine will look in the base Object for the toString method which is available there and from the base Object, it gets resolved.

Note: Base Object is the very core point in javascript, you can say it is the very end for prototype chain lookup as the proto property of the base Object points to null. If the javascript engine cannot resolve the property or method until up to the base Object then it will throw an error.

Let's understand two most confusing terms __proto__ property and prototype object in prototypal inheritance, one of them __proto__ would have been clear from above examples.
Alt Text
__proto__ points to the parent prototype object. In the second example of a.toString() a.__proto__ property points to the Array.prototype, let's conclude this with an example

Alt Text

From the above example, I want you to convey that the __proto__ property of variable points to the parent prototype object. In this example I have created variable a which is an array and the a.__proto__ points to Array.prototype

Note: If you want to check that a property belongs to the variable itself not the prototype chain you have a method hasOwnProperty which works as follows
Alt Text
Variable b is an object with property name so b.hasOwnProperty('name') return true while b.hasOwnProperty('toString') return false as toString method belongs to the parent.

Let me conclude this blog with an idea of how memory efficient is a prototypal inheritance. Let reference again the example of a.concat suppose if all the method of an array is copied to each new variable then how much memory each variable will consume. so by prototypal inheritance, every method of array resides in one place of memory and is referenced by each new variable, this type of referencing makes prototypal inheritance very memory efficient.

Top comments (0)