Prototypes/ Inheritance in Javascript

What is Inheritance?

Inheritance, in simpler words, is one object trying to access the properties and functions of another object.

When creating an object in JavaScript, the JS engine attaches some hidden properties and functions with our object. These properties and methods are accessible with our object.

A prototype object has all methods and properties available in JavaScript. This object is attached to the object that we have created by the JS engine. So, now the object has inherited all the properties of the prototype object.
 

We can see the functionalities present in prototype objects by “<objectname>.__proto__”

Figure: Methods available in prototype for the array

Let’s create an object in JavaScript.
 

let person = { name: "Akshat", city: "Jaipur", age: 21, describeMe: function() { console.log(this.name + " is from " + this.city + " and is " + this.age + " years old."); } }

 

 

 

 

 

 

 

Now let’s check the methods available for our ‘person’ object.

Figure: Properties of ‘person’ object and the properties available with a prototype object

What is Prototype Chaining?

Each Prototype object has its prototype; hence it creates a chain of prototypes. The prototype chain ends when we reach an object having null as its prototype.

Examples are there to make things easier to understand, so why spin your head around complex theory!!

Figure: Array prototype

The array has a prototype that can be accessed by <array-name>.__proto__, or we can see the available functions using Array.prototype; both are the same. 
 

Figure: Object prototype

Similarly, we can access the object prototype by using either of the above statements.

Here it is evident that we are creating a chain of prototypes. This chain will end when we get a null prototype.

Figure: Chain termination at the null prototype

Till now, we have seen what Inheritance is and what is prototype chaining in JavaScript. If the above concepts are clear, then the next super-important concept will be a cakewalk for you.

Understanding inheritance with prototypes - Prototypal Inheritance

In JavaScript, Inheritance is implemented using prototypes. To better understand this concept, let’s create two objects in our JavaScript program.

let person1 = { name: "Akshat", city: "Jaipur", age: 21, describeMe: function() { console.log(this.name + " is from " + this.city + " and is " + this.age + " years old."); } } let person2 = { name: "Virat", age: 32 }

 

 

 

 

 

 

 

 

 

 

Here I have created two objects, ‘person1’ and ‘person2’.

• Person1 has properties - name, city, age and a function - describeMe().
• Person2 has properties - name and age.
   

Figure: Accessing properties of objects in JavaScript console

Here if we try to access properties & functions that are not present in ‘person2’, we’ll get undefined or an error message, respectively.

Figure: Object doesn’t contain these properties

 

Now, let’s inherit the properties and functions of object person1 to person2. This can be done with a simple syntax.

person2.__proto__ = person1;

let person1 = { name: "Akshat", city: "Jaipur", age: 21, describeMe: function() { console.log(this.name + " is from " + this.city + " and is " + this.age + " years old."); } } let person2 = { name: "Virat", age: 32 } // Inheriting properties of person1 in person2 person2.__proto__ = person1;

 

 

 

 

 

 

 

 

 

 

 

Now, let’s again try to access the methods absent in person2 but are present in person1; it will not show any error because now person2 inherits person1.

Figure: Accessing properties and methods of person1 object with person2

person2.__proto__ = person1

Here, person2 is inheriting properties and functions from prototype-object, which is pointing to person1 object. So, indirectly we made person2 inherit the properties of person1.

You can compile with the help of Online Javascript Compiler for better understanding

Must Read Array of Objects in Java  and Fibonacci Series in JavaScript

Frequently Asked Questions

1. What is a Prototype in JavaScript?

A prototype is just an object that is by default attached to every method, object, and array in JavaScript.

2. How to see the available functions in JS with prototype object.

We can see the list of available functions in JavaScript by using the below syntax:

• <object-name>.__proto__ OR Object.prototype
• <array-name>.__proto__ OR Array.prototype

 

3. What is Prototypal Chaining?

Each of the Prototype objects has its prototype; hence it creates a chain of prototypes. The prototype chain ends when we reach an object having null as its prototype.

4. What is Inheritance in JavaScript?

The main idea for Inheritance is the same for all the languages, i.e., one object trying to access properties and functions of another object.

The only difference is that we implement it differently in JavaScript because JS is not a class-based language.

5. How to make an object inherit properties of another object.

To make an object ‘child’ inherit properties of another object ‘parent,’ we can use the below syntax:

child.__proto__ = parent;

Key Takeaways

Congratulations!! You have successfully unlocked another level in JavaScript. Keep reading to unlock more levels. :)

JavaScript is a bit confusing because it does not follow the classical model approach and tends to get a little complicated. Inheritance is a crucially important topic when it comes to building large-size applications and projects. That’s why it’s necessary to have the required knowledge regarding inheritance.

In this blog post, we first discussed prototypes (since JavaScript is a prototype-based language). We saw prototype chaining and then concluded the blog with understanding the concept of Prototypal Inheritance.

Happy Reading!