Open In App

Understanding the Prototype Chain in JavaScript

Last Updated : 18 Jan, 2025
Comments
Improve
Suggest changes
5 Likes
Like
Report

The prototype chain is a core JavaScript concept enabling the inheritance of properties and methods between objects. It facilitates code reuse, efficient property lookup, and object hierarchy creation.

  • Every JavaScript object has an internal link to another object, called its prototype.
  • The prototype chain forms when objects inherit properties and methods from their prototypes.
  • Property or method access starts from the object itself and traverses up the chain if not found.
  • The chain ends at null, the prototype of Object.prototype.
JavaScript 
const parent = { greet: () => "Hello!" };
const child = Object.create(parent);


//Driver Code Starts
console.log(child.greet());
console.log(Object.getPrototypeOf(child) === parent); 
//Driver Code Ends

In this example

  • parent is the prototype of child.
  • child inherits the greet method from parent.
  • The chain consists of child → parent → Object.prototype → null.

Syntax

function ConstructorName(params) {
  // Initialization code
}

ConstructorName.prototype.methodName = function () {
  // Method code
};

Real-World Use Cases

Extending Built-in Objects

JavaScript 
Array.prototype.sum = function () {
    return this.reduce((acc, val) =>
    	acc + val, 0);
};
console.log([1, 2, 3].sum());

Output
6

Custom Object Hierarchies

JavaScript 
const vehicle = {
    start() {
        console.log("Engine started.");
    },
};
const car = Object.create(vehicle);
car.drive = function () {
    console.log("Car is driving.");
};

car.start();
car.drive();

Output
Engine started.
Car is driving.

Checking Property Existence

JavaScript 
const car = {
    wheels: 4
};
const myCar = Object.create(car);
myCar.color = "red";


//Driver Code Starts
console.log("color" in myCar); 
console.log("wheels" in myCar); 
console.log(myCar.hasOwnProperty("wheels")); 
//Driver Code Ends

Output
true
true
false

Prototype Chain Traversal

JavaScript 
function fun(obj) {
    let current = obj;
    while (current) {
        console.log(current);
        current = Object.getPrototypeOf(current);
    }
}
const animal = { eats: true };
const mammal = Object.create(animal);
mammal.hasFur = true;
const dog = Object.create(mammal);
dog.barks = true;
fun(dog);

Output
{ barks: true }
{ hasFur: true }
{ eats: true }
[Object: null prototype] {}

Prototype Method Overriding

JavaScript 
function Vehicle() { }
Vehicle.prototype.start = function () {
    return "Vehicle is starting";
};
function Car() { }
Car.prototype = Object.create(Vehicle.prototype);
Car.prototype.constructor = Car;
Car.prototype.start = function () {
    return "Car is starting";
};
const myCar = new Car();
console.log(myCar.start());

Output
Car is starting

Advantages of the Prototype Chain

  • Code Reusability: Shared properties and methods reduce redundancy.
  • Efficient Memory Usage: Shared prototypes lower memory consumption.
  • Dynamic Behavior: Prototypes can be extended at runtime.
  • Scalable Object Hierarchies: Simplifies creation and management of relationships between objects.

A

abhishek18bme1037
Improve
Article Tags :

Explore

Lightbox