Prototype Inheritance in JavaScript (original) (raw)

Last Updated : 06 Dec, 2024

Prototype inheritance in JavaScript allows objects to inherit properties and methods from other objects. Each object in JavaScript has an internal link to another object called its prototype. This chain of prototypes forms the prototype chain.

When you access a property or method on an object, JavaScript first checks the object itself. If the property or method isn’t found, it moves up the prototype chain until it finds the property or reaches the end of the chain (null).

JavaScript `

const parent = { greet: function () { console.log("Hello from the parent object!"); } };

const child = Object.create(parent);

child.sayHi = function () { console.log("Hi from the child object!"); };

child.greet(); child.sayHi();

`

Output

Hello from the parent object! Hi from the child object!

Prototype Chain

The prototype chain is the mechanism that JavaScript uses to resolve properties and methods. If an object doesn’t have a requested property, the JavaScript engine searches up the prototype chain.

JavaScript ``

function Animal(name) { this.name = name; }

Animal.prototype.speak = function () { console.log(${this.name} makes a sound.); };

const dog = new Animal("Buddy");

console.log(dog.name); dog.speak();

``

Output

Buddy Buddy makes a sound.

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 Prototype inheritance let us see and understand Prototype Inheritance with following approaches -

• Using __proto__
• Using Object.setPrototypeOf() method

**1. Using __proto__

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.

JavaScript `

let animal = { animalEats: true, };

let rabbit = { rabbitJumps: true, };

// Sets rabbit.[[Prototype]] = animal rabbit.proto = animal; console.log(rabbit.animalEats); console.log(rabbit.rabbitJumps);

`

**2. Using **Object.setPrototypeOf() Method

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 `

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

`