Day 16 of 30 of JavaScript
Tags: webdev, javascript, beginners, tutorial
Published: 2024-06-11 08:57:55

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.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xtywg4e02vnwohwf4w81.png)
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. 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rtasujp40lryfuau8mcz.png)
Multiple classes can inherit from single class. 

## Types of Inheritance used in JavaScript

**1. Prototypal Inheritance**

Objects inherit from other objects through their prototypes.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h3zpgux09zjnggniv4th.png)
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++.![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rtasujp40lryfuau8mcz.png)

**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.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qifa05ck6a5fodm1a91z.png)
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🩵