Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

Explain Prototype Inheritance in JavaScript

  • Difficulty Level : Expert
  • Last Updated : 08 Oct, 2021

In this article, we will try to understand the facts that are required to effectively understand what exactly Prototype Inheritance in JavaScript means or what does it actually implies with the help of several examples of approaches.

Let’s understand the basics behind Prototype Inheritance in JavaScript.

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it's lowest price ever!

Prototype Inheritance in JavaScript: Following bullet points will try to analyze the basics behind Prototype Inheritance in JavaScript-



  • Under the classical inheritance phenomenon, we create a new class that actually extends or reuses the properties or functions, or methods of another class that are used by several programming languages (like C, C++, Java, etc.)
  • JavaScript doesn’t use classical inheritance instead it uses the phenomenon called Prototype Inheritance.
  • In Prototype Inheritance, an object uses the properties or methods of another object via the prototype linkage.
  • All the JavaScript objects inherit properties and methods from a prototype (like Date objects inherit properties from Date.prototype and so on).

Following pictorial representation, containing some sample values will help us to understand Prototype Inheritance in a much better and effective way-

  • In the above pictorial representation, we have taken an example to illustrate the Prototype Inheritance between a rabbit and another create prototype object which is an animal.
  • We will set the rabbit’s prototype object as an animal prototype object wherein we will store all the values of rabbit for a purpose that if in the case in while rabbit properties are missing then JavaScript will automatically take it from animal prototype object.

Now that you have understood a brief detailed description of the Prototype inheritance let us see and understand Prototype Inheritance with several following approaches-

Approach 1:

  • In this approach we will use __proto__, which is the special name for the internal and hidden prototype called [[Prototype]].
  • We will store all the properties of the rabbit in the animal prototype object and thereafter we may access it whenever it is required.
  • This __proto__ is a bit old as well as an outdated approach that exists for some historical reasons associated with JavaScript.

Example: 

Javascript




<script>
    let animal = {
        animalEats: true,
    };
  
    let rabbit = {
        rabbitJumps: true,
    };
  
    // Sets rabbit.[[Prototype]] = animal
    rabbit.__proto__ = animal;
    console.log(rabbit.animalEats);
    console.log(rabbit.rabbitJumps);
</script>

Output:

true
true

Approach 2: 

  • In this approach, we will use the new JavaScript methods to implement JavaScript Prototype Inheritance.
  • Here we will use Object.setPrototypeOf() method takes two parameters first one is the object which is to have its prototype set and the second one is the object’s new prototype.
  • Thereafter we have declared two objects and using those two objects, we will set one of the objects as the prototype object for another object.

Javascript




<script>
    let rabbit = {
        rabbitJumps: true,
    };
    let animal = {
        animalEats: true,
    };
    Object.setPrototypeOf(rabbit, animal);
    console.log(rabbit.animalEats);
    console.log(rabbit.rabbitJumps);
</script>

Output:

true
true



My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!