What is a prototype chain?- Details Example with Function and Classes
Table of contents
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.