Prototype Inheritance in Javascript
Tags: javascript
Published: 2019-12-08 06:52:46

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](https://thepracticaldev.s3.amazonaws.com/i/ouhyf952zc19kkuvqmk1.PNG)

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](https://thepracticaldev.s3.amazonaws.com/i/x5gd0o5dj3jogpva2utx.PNG)

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](https://thepracticaldev.s3.amazonaws.com/i/zrst9nbd1zgjbyg5m6gi.PNG)
`__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](https://thepracticaldev.s3.amazonaws.com/i/bcqoa8w1hj1mf9zjz0su.PNG) 

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](https://thepracticaldev.s3.amazonaws.com/i/8xqb251dn4e6hcfrht2o.PNG)
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.