Day 16 of 30 of JavaScript

Hey reader👋 Hope you are doing well😊
In the last post we have seen about this keyword in JavaScript. In this post we are going to know about Inheritance in JavaScript, we are going to start from very basic and take it to advanced level.
So let's get started🔥

What is Inheritance?

Inheritance is a way through which properties and methods defined in a class can be easily be used by other class.
The class which inherits the properties and methods is called Subclass. And the class whose properties and methods are inherited is called Superclass.
Suppose we have a animal class which has properties such as name, type, sound and has methods such as canMove(), canFly() etc. now we have two different classes namely dog and bird these both classes can inherit from the animal class and can utilize the properties and methods defined in it.

How Inheritance is performed in JavaScript?

To create a class inheritance, use the extends keyword.

So here we have a Person class which is a super class for Kid class. The Person class is inherited using extends keyword. Now we know that a kid can hav name, gender and age which are already defined in Person class so there is no need to define them seperately in Kid class we can use them with the help of inheritance. We have used super(name,gender,age) here this basically means that we are calling the constructor of Person class from Kid class.
By calling the super() method in the constructor method, we call the parent's constructor method and gets access to the parent's properties and methods.
We can define Kid specific properties and methods in Kid class.

Multiple classes can inherit from single class.

Types of Inheritance used in JavaScript

1. Prototypal Inheritance

Objects inherit from other objects through their prototypes.

Here we have an Animal constructor function then we have added a speak() method to animal prototype then we have a Dog constructor function that calls Animal constructor function using call() method so that we can make use of name property defined in Animal. Then we have created a new object that inherits from Animal.prototype and assigned it to Dog.prototype. This sets up the inheritance chain, allowing instances of Dog to access methods defined on Animal.prototype. The Dog.prototype.constructor = Dog line ensures that the constructor property of Dog.prototype points back to Dog. Becuase after the inheritance setup, if we create an instance of Dog and inspect its prototype chain, we would find that its constructor points to Animal, which is not accurate. The Dog.prototype.constructor = Dog line explicitly sets the constructor property back to Dog, ensuring that instances of Dog correctly reference Dog as their constructor.

2. Classical Inheritance

Introduced in ECMAScript6 (ES6) with the class keyword. Uses a class-based approach similar to other programming languages like Java or C++.

3. Functional Inheritance

Objects inherit properties and methods from other objects through function constructors. It uses functions to create objects and establish relationships between them.

We have used createAnimal function to create animal object which has name as property and sound as method then we have createDog function that creates a Dog object by calling createAnimal() to get a base animal object. A new dog object is created with the name "Buddy" and breed "Labrador" by calling the createDog function.

So this is how Inheritance is performed using JavaScript. I hope you have understood this blog. Don't forget to like the blog and follow me.
Thankyou🩵