Inheritance in Javascript
This blog will help you,
- understand what is inheritance in JavaScript
- Why is it becomes necessary to use them
- How to implement the Inheritance
What is Inheritance?
Inheritance is Acquiring all public properties of an Function/Class and building on additional Properties, re-writing few of them. Javascript Classes i.e. constructor functions eventually do not support private properties. Hence it is safe to say, Acquiring all the properties of Object.
Every time you talk about inheritance, JavaScript diverts to Prototypical Inheritance. It is clear, JavaScript Inheritance is not traditional and has few new things to offer.
What is Prototypical Inheritance?
Compared to other Object oriented Programming language, Javascript is unique in terms of representation or implementation of the Inheritance. Basically, Prototypical inheritance is chaining of object from one to other. One Object points to second, second points to third until we react to top level of hierarchy tree which is an instance of Object class.
Lets create simple constructor function.
O/P
If you look at the output carefully, although samsung is an instance of Mobile class. But, with the help of __proto__ property it has been linked to Object class as well. We have not implemented inheritance. We have just created the Class and its instance. By default, Every instance in the JavaScript is instance of Object as well. It is a poly behaviour of the Object and that’s why JavaScript instance IS-A polymorphic.
Let’s discuss more complex example.
We have different Companies of Mobile, Each Company has different models. Most of the properties are common but few are different as well. So let’s try to create the function Mobile for all the brand.
Your instance of samsung and apple will look like this,
As, we List down the properties, It becomes extremely difficult for us to write generic function Mobile for all brands of mobiles. Few properties are version specific, Few are Operating system specific. So breaking them into different blocks and chaining them together becomes necessary.
If you see the output of the apple and samsung objects. You will find there are hasFaceTime, hasSiri, hasAppStore etc. properties are unnecessary as Android mobiles do not have them. Similarly hasPlayStore is unnecessary property to the Apple mobile for obvious reasons. Now this brings us into Poor Performance Arena.
Space Complexity: We have unnecessary fields means unnecessary memory. This is Poor
Space Complexity.
Time Complexity: Operation like validation, comparisons will iterate over the object keys so it
will have additional operation that brings us to Poor Time Complexity.
To make it worse, These are very few properties of the mobile and still we are in the mess. Consider on practical scenarios, consider categories of eCommerce, how long would be the hierarchy and keys?
We all have to take power of reusability at its utmost usage, Here comes the Inheritance into picture.
Terminologies:
- __proto__
- prototype
What is __proto__?.
__proto__ is a object which lives inside any object as a key, which is responsible for looking up for Prototypical chain. Prototypical Chain is simple link to properties of Parent Class.
Note: Instance of Object class does not have __proto__ key, because Object is at top level of Class Hierarchy.
Javascript does not recommend you to use the __proto__ object. It might override the priority of properties.
If you look at following example. There is a constructor function ErrorMessage which holds message as a property. We have added default message property into it via prototype if any instance fails to pass it. Look at the output produced when we use __proto__. It has ignored what instance had and always given the default values which are present at parent level. Although this is quite obvious but we all know priority in case of conflicts is highest for immediate level.
What is prototype?.
Prototype is special property of class/function which is used to create prototypical chain. In above example we have added message if there is void message provided in the constructor. This way we can add properties in the prototypical chain.
We can access those properties through same instance with priorities taken into consideration. It does not override the properties of base instance but add them in some special bucket and made available through prototypical chain.
Consider following example,
o/p
When we have created the instance of Mobile class, We can see constructor properties are copied to instance but the special function getBatterCapacity is chained through __proto__ key.
When you try to call that function, you don’t need to do anything special. You can access those properties with the same instance.
How to implement Prototypical Inheritance?
There are 2 steps to completely inherit Parent Class.
- Clone the parent function with call, apply
- Bind the __proto__ link to Parent class.
To Understand it clearly let’s look at following example,
Inheritance using Class
Same example can be implemented using class as below,
Conclusion
Inheritance is not a compulsory pattern to design every time you write couple of functions. sometimes scenario for which you are writing the code demands it. However Most of the Frameworks/Libraries, Higher version of JavaScript internally uses them, The knowledge of Prototype, Prototypical chain helps you at a times of reading different libraries, Reusing functionalities, Optimizing performance.
