Most of the time when programming in JavaScript we may want to extend or inherit the properties and methods of another object to one object.
This is done using prototypal inheritance in JavaScript.
Let me explain, suppose you have two objects user and admin
// admin object
let admin = {
userlevel: "admin",
shutdownSystem: () => {
console.log("Shutting down system");
},
};
// a user object
let user = {
name: "John Doe",
};
How do we make our user object get or inherit the methods and properties of the admin object?
We can do this using a property called __proto__.
// admin object
let admin = {
userlevel: "admin",
shutdownSystem: () => {
console.log("Shutting down system");
},
};
// a user object
// inherit properties and method using the __proto__ property
let user = {
name: "John Doe",
__proto__: admin,
};
Now try to get the properties or invoke the methods in the admin object using the user object.
// admin object
let admin = {
userlevel: "admin",
shutdownSystem: () => {
console.log("Shutting down system");
},
};
// a user object
// inherit properties and method using the __proto__ setter property
let user = {
name: "John Doe",
__proto__: admin,
};
// accessing userlevel property of admin object from user object
console.log(user.userlevel); // ==> admin
// invoke or call shutdownSystem() method of admin object from user object
user.shutdownSystem(); // ==> Shutting down system
As you can see we have successfully inherited all the properties and methods of admin object to the user object using the __proto__ property.
The __proto__ is a setter and a getter for the [[Prototype]] hidden property. See this to understand what setter and getter properties are.
The [[Prototype]] is a hidden and internal property of every object. It can be of value null or references to other objects. When we set the __proto__ value to another object, we are setting the value for [[Prototype]] hidden property.
When there is no function or method defined in the object we are calling it. The JavaScript looks for these methods and properties through this [[Prototype]] hidden property internally.