Understanding JavaScript’s Prototype

Chapter 1: The Birth of Shared Wisdom

Imagine a family that has been cooking delicious meals for generations.

They have a family recipe book, a treasured collection of cooking instructions passed down from grandparents to parents to children.

This recipe book ensures that every family member, whether they are in Mumbai, Sydney, or Paris, can cook the same delicious meals without starting from scratch.

This family recipe book is the perfect analogy for understanding JavaScript’s prototype.

The Family Recipe Book: A Shared Wisdom

Think of the prototype in JavaScript as this family recipe book. Instead of each family member having to write down their recipes, they all refer to the shared book.

This book holds all the methods (recipes) they need. When a new member joins the family and wants to cook, they look at the book. They don’t need to invent their versions of pasta or soup; they use the tried-and-true recipes already written down.

Example: Creating a Simple Family Member

Let’s start by creating a family member with a constructor function:

function FamilyMember(name) {
  this.name = name;
}

Without prototypes, if we wanted each family member to be able to cook, we would have to add the cooking method to each member individually:

const manoj = new FamilyMember('Manoj');
manoj.cook = function(recipe) {
  console.log(`${this.name} is cooking ${recipe}.`);
};

const rajaji = new FamilyMember('Raja ji');
rajaji.cook = function(recipe) {
  console.log(`${this.name} is cooking ${recipe}.`);
};

manoj.cook('gol gappe'); // Manoj is cooking gol gappe.
rajaji.cook('rajma chawal'); // Raja ji is cooking rajma chawal.

This works, but it’s inefficient. We’re duplicating the cook method for every family member.

Using Prototypes for Shared Methods

Like the family recipe book, we can use prototypes to share the cook method among all family members. Instead of giving each family member a copy of the method, we add it to the prototype of the FamilyMember constructor:

FamilyMember.prototype.cook = function(recipe) {
  console.log(`${this.name} is cooking ${recipe}.`);
};

const manoj = new FamilyMember('Manoj');
const rajaji = new FamilyMember('Raja ji');

manoj.cook('dahi bhalla'); // Manoj is cooking dahi bhalla.
rajaji.cook('aaloo chokha'); // Raja ji is cooking aaloo chokha.

By adding cook to FamilyMember.prototype, we ensure that every instance of FamilyMember can access the cook method. It’s like having one central recipe book that everyone refers to, rather than each person writing down the same recipes over and over again.

The Prototype Chain: Following the Recipe

When you call manoj.cook('dahi bhalla'), JavaScript first looks for the cook method on the manoj object. If it doesn’t find it there, it climbs up the prototype chain to FamilyMember.prototype and finds the method. This chain of prototypes can go up to the ultimate ancestor, Object.prototype.

Summary: The Power of Prototypes

Understanding prototypes is like discovering a hidden family recipe book. Instead of every family member carrying the burden of their recipes, they can share and inherit them through the prototype. This makes the code more efficient and promotes reusability and cleaner design.

In JavaScript, prototypes are the cornerstone of inheritance, allowing objects to be more than just a collection of properties. So, next time you work with JavaScript, remember the tale of the family recipe book. Prototypes are not just lines of code — they’re the shared wisdom that makes your objects smarter and your life easier.