Prototypal Inheritance

1. Introduction

JavaScript handles object inheritance differently than class-based languages (like Java or C++). Instead of copying class templates, JavaScript uses Prototypal Inheritance, where objects inherit properties and methods directly from other objects via prototype linkages.

2. Why It Matters

Prototypal inheritance is the core mechanism behind JavaScript objects. Understanding prototypes helps you share methods efficiently across object instances, reducing memory overhead, and explains how ES6 classes work under the hood.

3. Real-World Analogy

Think of a Family Heritage Recipe Book:

• Classical Classes (Blueprints): A factory prints separate, complete recipe booklets for every kitchen. If a new recipe is added, all booklets must be reprinted and replaced.
• Prototypal Inheritance (The Master Book): A family recipe book kept at the grandparents' house. You don't copy the pages to your kitchen. When cooking, you check your local notebook (instance properties). If a recipe isn't there, you look up the page in the grandparents' book (parent prototype). If grandparents add a recipe, it becomes accessible to all grandchildren instantly without reprinting.

4. How It Works

Every JavaScript object has an internal linkage called [[Prototype]] (accessible via __proto__ or Object.getPrototypeOf()) that points to its prototype object.
When you define a constructor function, its prototype property is shared with all instances created using the new keyword:

5. Prototype vs __proto__

It is important to distinguish between these two properties:
• prototype: A property defined only on constructor functions. It acts as the template for the [[Prototype]] link of any new object instances created by that constructor.
• __proto__: A getter/setter accessor on instances that exposes their internal [[Prototype]] linkage, pointing to the parent prototype object.

6. Practical Example

This script demonstrates how setting methods on a constructor's prototype saves memory compared to declaring them inside the constructor body:

7. Common Mistakes

• Overwriting the prototype object entirely: Overwriting the prototype with a new object literal (e.g. MyFunc.prototype = { ... }) breaks the constructor property linkage. Always restore constructor or append methods individually.

8. Quick Quiz

9. Scenario-Based Challenge

10. Debugging Exercise

function Vehicle() {}
const car = new Vehicle();
// Declaring the method on prototype after instance creation
Vehicle.prototype = {
  start() {
    console.log('Engine started');
  }
};
car.start(); // throws TypeError: car.start is not a function!

function Vehicle() {}
const car = new Vehicle();

Vehicle.prototype.start = function() {
  console.log('Engine started');
};
car.start(); // works correctly!

11. Interview Questions

12. Production Considerations

• • Avoid __proto__ in Production: Modifying the prototype linkage of an object directly using __proto__ is slow in all JavaScript engines. Use Object.create() to define prototypes during object creation, and treat prototypes as read-only.