2025-02-17

The Prototype Chain - How Inheritance Works

JavaScript uses prototypal inheritance, which means objects can share properties and methods with other objects.
This helps in writing reusable, efficient, and memory-optimized code.

To understand this better, let’s explore the prototype chain with a simple real-world family example 👇

🧩 Problem Without Prototype Chain

Imagine you have an object objectA with 20 key-value pairs following a specific structure.
Now, if you want another object objectB to have the same structure, you might think of manually copying all the properties.

But this is:

❌ Repetitive
❌ Error-prone
❌ Inefficient

To avoid this, JavaScript provides an elegant solution - the Prototype Chain.

👨‍👩‍👦 What is a Prototype Chain?

Think of a family where habits and traditions are passed down through generations.

The grandfather has certain traditions.
The father inherits these traditions but also develops his own unique habits.
The child inherits both the father’s habits and the grandfather’s traditions.

If the child doesn’t know something, he asks his father.
If the father doesn’t know either, he asks the grandfather.
This continues until someone knows - or until there’s no one left in the chain.

💡 That’s how JavaScript works - when a property or method is not found in an object, it is searched up the prototype chain until found (or undefined is returned).

🧠 Prototype Chain in Code

// Grandparent Object
let grandfather = {
  surname: "Patel",
  sayHello: function () {
    console.log("Hello from the grandfather!");
  }
};

// Parent Object inheriting from Grandparent
let father = Object.create(grandfather);
father.occupation = "Computer Engineer";

// Child Object inheriting from Father
let child = Object.create(father);
child.hobby = "Painting";

console.log(child.surname);     // Inherited from grandfather -> Output: Patel
console.log(child.occupation);  // Inherited from father -> Output: Computer Engineer
child.sayHello();               // Inherited from grandfather -> Output: Hello from the grandfather

The child doesn’t have the surname property, so JavaScript looks up to its prototype (father).

The father doesn’t have surname either, so JavaScript checks the grandfather.

It finds surname: "Patel" in the grandfather and returns it.

🧠 How It Works

child.surname → Not found in child, so it looks at father.
Not found in father either, so it looks at grandfather.
Found there → "Patel"

That’s how JavaScript searches for properties — it keeps looking up the prototype chain until it finds what it needs.

🔭 Visualizing the Prototype Chain

Every object in JavaScript ultimately links to Object.prototype, which provides common methods like toString(), hasOwnProperty(), etc.

⚡ Why is the Prototype Chain Useful?

Dynamic Behavior – If you update a method in a prototype, all inherited objects reflect the change automatically.
Code Reusability – Instead of copying methods into every object, they can inherit from a common prototype.
Memory Efficient – Methods are stored in a shared prototype, saving memory. (DRY principle 😀).

ChhotiBachhi++ 🚀