YogeshChauhan . com

What is Prototypal Inheritance in JavaScript?

in JavaScript on November 21, 2020

Let’s start from basics. One by one.

What are Object prototypes?

Prototypes are the mechanism by which JavaScript objects inherit features from one another.

JavaScript is often described as a prototype-based language — to provide inheritance, objects can have a prototype object, which acts as a template object that it inherits methods and properties from.

An object’s prototype object may also have a prototype object, which it inherits methods and properties from, and so on.

This is called a prototype chain, and explains why different objects have properties and methods defined on other objects available to them.

Prototypal inheritance

In programming, we often want to take something and extend it.

For example, let’s say we have a user object with its properties and methods, and we want to make admin and guest as users slightly modified versions of the user object.

We’d like to reuse what we have in user, not copy its methods, just build a new object on top of it.

In that case, Prototypal inheritance feature will be really helpful.

[[Prototype]]: In JavaScript, objects have a special hidden property [[Prototype]] which is either null or references another object. That object is called “a prototype”.

💡 When we want to read a property from object, and it’s missing, JavaScript automatically takes it from the prototype. In programming, such thing is called “prototypal inheritance”.

The property [[Prototype]] is internal and hidden, but there are many ways to set it.

One of them is to use the special name __proto__, for example:


let animal = {
    eats: true
};

let rabbit = {
     jumps: true
};
    
rabbit.__proto__ = animal;

//output

{ eats: true }

If we look for a property in rabbit, and it’s missing, JavaScript automatically takes it from animal.

For example:


let animal = {
    eats: true
};
let rabbit = {
    jumps: true
};

rabbit.__proto__ = animal; 

// output
// we can find both properties in rabbit now:
alert( rabbit.eats ); // true
alert( rabbit.jumps ); // true

Here the line rabbit.__proto__ = animal; sets animal to be a prototype of rabbit.

Then, when alert tries to read property rabbit.eats, it’s not in rabbit, so JavaScript follows the [[Prototype]] reference and finds it in animal.

If we have a method in animal, it can be called on rabbit.

For example,


let animal = {
    eats: true,
    walk() {
    alert("Animal walk");
    }
};

let rabbit = {
    jumps: true,
    __proto__: animal
};

// output
// walk is taken from the prototype
rabbit.walk(); // Animal walk

The method is automatically taken from the prototype.

The prototype Attribute

💡 Every object has associated prototype, class, and extensible attributes.

An object’s prototype attribute specifies the object from which it inherits properties.

💡 The prototype attribute is set when an object is created.

Objects created from object literals use Object.prototype as their prototype.

Objects created with new use the value of the prototype property of their constructor function as their prototype.

And objects created with Object.create() use the first argument to that function (which may be null) as their prototype.

Function prototypes

Functions have a prototype property distinct from their __proto__ property. It’s an object. A function’s prototype’s __proto__ property is equal to Object.prototype.

For example,


function fn() {}
console.log(fn.prototype.__proto__ === Object.prototype);
// -> true

The __proto__ of an object created by calling a function with new is equal to the prototype of that function.

The __proto__ of a function’s prototype is equal to Object.prototype. The __proto__ of Object.prototype is null

For example,


function Fn() {}
var obj = new Fn();
console.log(obj.__proto__ === Fn.prototype);
// -> true
console.log(obj.__proto__.__proto__=== Object.prototype);
// -> true
console.log(obj.__proto__.__proto__.__proto__ === null);

//something like This
__proto__ === null
|
|             
__proto__ === Object.prototype
|
|
__proto__ === Fn.prototype
|
|
obj

this keyword on the object’s prototype chain

If the method is on an object’s prototype chain, this refers to the object the method was called on, as if the method were on the object.


var o = {f: function() { return this.a + this.b; }};
var p = Object.create(o);
p.a = 1;
p.b = 4;

console.log(p.f()); // 5

In the example above, the object assigned to the variable p doesn’t have its own f property, it inherits it from its prototype.

The lookup began as a reference to p.f, so this inside the function takes the value of the object referred to as p.

That is, since f is called as a method of p, its this refers to p. This is an interesting feature of JavaScript’s prototype inheritance.

Sources

amazon

Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #3 How to add Read More Read Less Button using JavaScript? #4 How to uninstall Cocoapods from the Mac OS? #5 How to Use SQL MAX() Function with Dates? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

Jun 16 What are Stored Procedures for SQL Server? Jun 16 What are Class Constants in PHP? Jun 15 A short basic guide on states in React Jun 15 How to define constants in PHP? Jun 15 How to define visibility for a property in PHP? Jun 15 How to use @if and @else in SCSS?

You might also like these

What is XP (Extreme Programming) and When should it be used?MiscFor Each Loop in Swift for BeginnersSwiftThe fundamental difference between HAVING and WHERE clauses in PostgresPostgresHow to insert Bootstrap 4 in Angular 9 app?AngularWhat is PostgreSQL? How similar or different it is from SQL?PostgresHow to add multiple Columns in CSS like Bootstrap?CSS