What is a prototype chain?- Details Example with Function and Classes

What is a prototype chain?- Details Example with Function and Classes

Table of contents

No heading

No headings in the article.

A prototype chain is a mechanism in JavaScript that allows objects to inherit properties and methods from other objects. Every object in JavaScript has a prototype, which is either another object or null, and when a property or method is accessed on an object and it's not found on that object, the JavaScript engine looks for it on the object's prototype, and so on, until it reaches the end of the prototype chain.

Here is an example to demonstrate the concept of a prototype chain.

// Define a constructor function for the parent object
function Parent() {
  this.name = "Parent";
}

// Add a method to the parent object's prototype
Parent.prototype.getName = function() {
  return this.name;
};

// Define a constructor function for the child object
function Child() {
  this.name = "Child";
}

// Set the child object's prototype to an instance of the parent object
Child.prototype = new Parent();

// Create an instance of the child object
let child = new Child();

console.log(child.getName()); // Output: "Child"
console.log(child.hasOwnProperty("getName")); // Output: false

In this example, the Child object is created by using the Child constructor function. But this constructor function doesn't have any property or methods, so instead of searching for properties or methods in the Child object, the javascript engine starts searching it in the Child object's prototype, which is set to an instance of the Parent object, so it finds it there.

So when we call the getName method on the child object, it is not found on the child object itself, so the JavaScript engine looks for it on the child object's prototype, which is an instance of the Parent object, and it finds it there, the engine returns the value "Child".

You could also see in the last statement child.hasOwnProperty("getName") returning false, it means the property getName is not own property of the child object, it's inherited from the prototype.

Here's an example of how you might use classes to create a prototype chain:

class Parent {
  constructor() {
    this.name = "Parent";
  }

  getName() {
    return this.name;
  }
}

class Child extends Parent {
  constructor() {
    super();
    this.name = "Child";
  }
}

let child = new Child();

console.log(child.getName()); // Output: "Child"
console.log(child instanceof Parent); // Output: true
console.log(child instanceof Child); // Output: true

In this example, the Child class extends the Parent class, which means that the Child class inherits the properties and methods of the Parent class. When a new Child object is created, it's prototype is set to the Parent class's prototype, this way javascript engine will start looking for properties and methods in Child object, if it's not found it goes up to it's prototype which is Parent class's prototype and look for it there.

You can also see in the last two statements, child instanceof Parent returns true and child instanceof Child also returns true, it means child is an instance of both Parent and Child classes, because of the prototype chain.

It's important to notice that the super() function is called in the Child class's constructor function, this is necessary to ensure that the Parent class's constructor function is called and its properties are initialized properly on the Child object.