Understanding JavaScript’s Prototype

Chapter 3: The Tale of Two Brothers: Prototype and __proto__

In the same vibrant village of JavaScript Nagar, two brothers often confused the villagers: Prototype and __proto__. They were similar in many ways, but each had a unique role in the magical land of JavaScript.

The Elder Brother: Prototype

The elder brother, Prototype, was a blueprint for creating new objects. He was associated with the constructor functions community. Whenever a new object was created using a constructor function community, it inherited properties and methods from the Prototype.

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

Warrior.prototype.attack = function() {
  console.log(`${this.name} attacks!`);
};

const arjun = new Warrior('Arjun');
arjun.attack(); // Arjun attacks!

In this story, Warrior.prototype is the elder brother. When arjun was created using the Warrior constructor, he inherited the attack method from Warrior.prototype.

The Younger Brother: __proto__

The younger brother, __proto__, was slightlya different. Every object in JavaScript Nagar had a hidden property called __proto__. This property pointed to the prototype of the object’s constructor, creating a link in the Prototype Chain. As mentioned above, arjun is the object and new Warrior() is the constructor.

console.log(arjun.__proto__ === Warrior.prototype); // true

In this example, arjun.__proto__ points to Warrior.prototype, linking arjun to the elder brother.

Their Unique Roles

Though they were often seen together, Prototype and proto had distinct roles:

1. Prototype:

• Belongs to constructor functions.
• Defines properties and methods that should be inherited by all instances the constructor creates.

2. __proto__:

• Exists on all objects.
• Points to the prototype of the constructor function that created the object.
• Helps in the traversal of the Prototype Chain to find properties and methods.

An Illustrative Example

To better understand their roles, let’s look at another example:

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

Jadugarni.prototype.castSpell = function() {
  console.log(`${this.name} casts a spell!`);
};

const sonpari = new Jadugarni('Sonpari');
console.log(sonpari.__proto__ === Jadugarni.prototype); // true
console.log(Jadugarni.prototype.__proto__ === Object.prototype); // true

Here, Jadugarni.prototype is the blueprint that provides the castSpell method. sonpari.__proto__ links Sonpari to this blueprint, allowing her to cast spells.

The Global Object and the Final Link

The Prototype Chain eventually links all objects back to the ancient ancestor, Object.prototype. This is where the journey of both Prototype and __proto__ ultimately leads.

console.log(Object.prototype.__proto__ === null); // true

This final link signifies the end of the chain, where the global wisdom of Javascript Nagar resides.

Summary: The Brothers in Harmony

In JavaScript Nagar, Prototype and __proto__ work together to provide a powerful inheritance system:

• Prototype: The elder brother, a blueprint for creating new objects with shared methods.
• __proto__: The younger brother, a hidden property that links objects to their prototypes and traverses the Prototype Chain.