Inheritance in JavaScript & Its Types With Examples.

In real life, everyone plays different roles. For instance, a woman can be a mother, employee as well as a wife at the same time. The same woman performs different tasks depending on which role she is playing at that moment. This act of one object or class performing different tasks as per the role is called polymorphism. Here we will discuss polymorphism and inheritance in JavaScript.

What is Polymorphism?

From the above example, you must have got an idea of where this conversation is directed. JavaScript is a prototype of an object-oriented language. Java and JavaScript both are object-oriented languages but they do not deal with polymorphism in the same format. Even though polymorphism is a core feature of OOPs some data-oriented languages use it through Entity Component System or ECS pattern.

In object-oriented programming, we make use of inheritance for interfaces and abstraction to use polymorphism. A child class or subclass takes up the properties of the parent or the superclass to define it. Inheritance in JavaScript can grow from present family to grandparent or great-grandparents and so on.

What is inheritance in JavaScript?

Inheritance allows you to define a class and then take all the functionality and features of the class and give them to another. The one who gives the features is called the parent class or superclass and the one who inherits the feature is called a child class or subclass. By using inheritance, a class can inherit all the required methods and can also have its unique features.

Let us understand inheritance in JavaScript but using an example. There is an object Animal. It has two methods or features called eat and sleep. The animal is the parent or the superclass. Then there is another object Dog. It extends Animal. Now the features or methods of Animal can be accessed by Dog. Additionally, Dog has its own feature which is bark. Hence Dog has access to bark which is its own feature as well as eat and sleep the inherited features.

Inheritance in JavaScript maintains an IS-A relationship. Then the keyword ‘extends’ is used in class expression or declaration. It is also used to acquire all the functionalities of the inbuilt object as well as custom classes.

As stated below JavaScript is object-oriented but it is not like Java. It is a prototype base. Due to this, there are no classes. There are only objects. Hence for inheritance in JavaScript, we can use Prototypal or Pseudo classical inheritance. We will explain them in brief below.

Types of inheritance in JavaScript

Inheritance in JavaScript is a very vast concept and there are many methods to implement it. Mainly there are three types of inheritance in JavaScript. They are, prototypal, pseudo classical, and functional. Now let us look at each type of inheritance in JavaScript and understand them properly.

1. Prototypal Inheritance

This type of inheritance in JavaScript adds new properties and methods to the existing object. Prototypal inheritance in JavaScript makes use of prototype object that is object.prototype. It is a method through which an object can inherit the properties as well as the methods of another object. Initially, in order to get and set the [[Prototype]] of the object we used Object.getPrototypeOf and Object.setPrototypeOf. But now we can make use of __proto__.

2. Pseudo-classical Inheritance

This inheritance in JavaScript is very similar to the previous one, prototypal inheritance. In Pseudo classical inheritance, it emulates the classical inheritance by using prototypal inheritance. But if you are programming with ES6, then this type of inheritance in JavaScript is not supported. As one can use conventional classes that are using the keyword class. In Pseudo-classical inheritance, we try to create a class with a method that is intended to be called using the new keyword.

3. Functional Inheritance

From the name of the inheritance, you understand that this type of inheritance in JavaScript makes use of functions. Functional Inheritance uses an augmenting function to the instance of the object in order to inherit the features of that object.

To practice real life Javascript projects – Start with 50 days of JS

Use of Inheritance in JavaScript

As the child or the subclass inherits the features and functionality of the parent or the superclass, code reusability can be done. This helps to reduce the lines of code in the program and also saves the developer’s time and effort.

Once the function has been developed, all you have to do is inherit it. There is no need to rewrite the code hence this makes the project cleaner and easy to maintain. Furthermore, to add some unique functionally to the child or subclass, you can inherit only the useful features and define the other required ones as you please.

Master Javascript from Scratch With Codedamn

Conclusion

Hope you clearly understood inheritance in JavaScript and how is it related to polymorphism. To practice concepts like this Codedamn has a playground. This playground is an online compiler where you can learn and play around with your code. Codedamn also has amazing blogs, YouTube videos, and courses that will increase your technical abilities in no time!

Do check out the courses at Codedamn. If you have any queries or suggestions, do let us know in the comments!