Prototype Inheritance in JavaScript – In Brief

In this tutorial, we will understand what is Prototype Inheritance. Before you dive into Prototype Inheritance we need to first understand what is a prototype?.

Well, you know that the object has a specially hidden property prototype and JavaScript will access this property if property and method do not exist. Suppose you specified a property to the object and want to access that property and this property does not exist then JavaScript will move to the prototype and search for that property. Using the example we will understand the complete concept behind the prototype inheritance. inheritance provides a reusability of properties and methods of the existing object.

To set the prototype you need to specify prototype __proto__ property. Using the photo property you can set and get properties and methods of the prototype.

let’s consider the following example,

For example,

Now let’s access object properties and print on the console. So if you wanted to access bike property then you can say

Now you know that you can access object properties and methods using object name. But what if I say you can access the car object using the bike object. Yes you heard it right,  you can access all the properties and methods of the car object using the bike object.

Like this,

if you are wondering how does this happened then let me tell you that we had specified a prototype property of the bike object. So when the JavaScript execute this statement.  JavaScript will first check the object own properties.  if he does not find any existing property there then the JavaScript will look at the prototype property of the bike object and utilize it. 

Now here you can say a car is a prototype of a bike object. And you can say bike prototypical inherit the car object.

So if a car has more than two useful properties and methods then you can access all of these properties and methods using bike object. So these methods are automatically available for the bike object. Such properties are called inherited.

if you have a method in car object then this method would be available to the bike object also.

Like this,

Using Method,

Now you can access the car object method using the bike object.


Object Prototype

now let me tell you What is the prototype chain. Now suppose if we have one more object here.

So when you execute this you get a message on the console. This is all happened using the prototype chain.

The gear object has a prototype property and the prototype property also has its own prototype property. You can create a number of object prototype chain as per your wish. Now using the bicycle object you can access any properties and methods of car and bike object.  


Class Inheritance

Inheritance is the mechanism allow us to create new classes On the basis of already existing classes. Using the inheritance you can create a child class of the parent class. Inheritance provides a flexibility to the child class to reuse methods and variables of the parent class.

In JavaScript you can use extends keyword to create a child class on the basis of a parent class. Using the extend keyword you can acquire all the properties,  methods and behavior from the inbuilt object as well as the custom object.

The date object is the proper example of inbuild object. And the custom object is that which you will be creating using the class. We will just touch the basic example of inheritance.

For example,

Suppose, you have created a class of person with a first name and last name. After you deploy this class you want to add age to the person. But instead of modifying the first parent class. We will create a child class which has an age property with a method which will display username and age.

In this example, we will create two classes. Parent class. And child class.  First, we will create a person and specify a first name and last name property. The second class will specify age to the person.

Now, what is a super() method? The super method is used to call the parent class constructor. using the super method you can pass a parameter to the parent class constructor and call them.

We will call the parent class constructor using the super method and specify values to the parameter. If you wanted to print person name on the console then you can do that using the child class instance.

Like this,

This will print person name of the console. 

That’s it. I hope you understand what is inherited. Inheritance is a very important topic to understand. If you have any question then you can in the comment.

In the previous article, we learn what is Object-Oriented Programming. If you wanted to read this article then go to this link and read it. as simple as that.

Thank you…!