JavaScript Prototypes: Understanding the Prototype Chain and Object Inheritance

What Is a Prototype? The Shared Toolbox 🧰

Every JavaScript object has a hidden link to another object — its prototype. When you access a property the object doesn't have, JavaScript looks it up on the prototype instead.

Think of it like renting an apartment:

• 🏠Your apartment(the object) holdsyourstuff — your own properties
• 🏢The building's shared facilities(the prototype) — gym, pool, laundry — available to every resident, owned by none of them

When you "use the gym," you're using something that isn'tyours— your apartment just hasaccessto it. That's exactly howarr.map()works:mapisn't in your array — it's in the shared facility your array links to.

const arr =[1, 2, 3];
console.log(arr.hasOwnProperty("map"));
// false — NOT in your array! 😮
console.log(typeof arr.map);
// "function" — but you can still call it! ✅

The method isn'tinthe array — it'sreachable fromthe array. That distinction is the entire lesson.

The Two Confusing Prototype Words 🎭

Here's the most-confused distinction in JavaScript — let's settle it permanently:

①__proto__— The Object's Hidden Link 🔗

Everyobject instancecarries a hidden link to its prototype. Historically visible as__proto__(now accessed properly withObject.getPrototypeOf):

const arr =[1, 2, 3];
// Where does my array's link point?
console.log(Object.getPrototypeOf(arr) === Array.prototype);
// true ✅
// The old way (you'll see it in DevTools and old code):
console.log(arr.__proto__ === Array.prototype);
// true — same thing

②prototype— The Constructor's Blueprint Property 📐

Functions(and only functions) have aprototypeproperty — it's the object that willbecomethe__proto__of everything they construct:

function Student(name) {
  this.name = name;
}Student.prototype.greet = function() {
  // 📐 methods on the blueprint
  return `Hi, I'm ${this.name}!`;
};
const s1 = new Student("Priya");
console.log(Object.getPrototypeOf(s1) === Student.prototype);
// true ✅
console.log(s1.greet());
// "Hi, I'm Priya!" — via the link 🔗

🏆 The Disambiguation Card (Interview Gold)

// The relationship in one line:function Dog() {}const rex = new Dog();
Object.getPrototypeOf(rex) === Dog.prototype;
// true — this IS the relationship ✅

🧠 Memory trick:Dog.prototypeis theblueprint.rex.__proto__is rex'smembership cardto what the blueprint built. When you writenew Dog(), JavaScript setsrex.__proto__ = Dog.prototypeautomatically (that was step ② ofnewin Lesson 48!).

The Prototype Chain: The Lookup Algorithm 🔍

Here's the exact algorithm JavaScript runs every time you touch a property:

const leo = {
  name: "Leo"
};
// Lion instance from Lesson 56's zooleo.eat();

🔍 Looking for "eat"…1️⃣ Is it on leo himself? ❌2️⃣ Lion.prototype? ❌3️⃣ Animal.prototype? ✅ FOUND! Run it!(search stops — never goes further)

And for a method nobody defined:

leo.toString();

1️⃣ leo? ❌2️⃣ Lion.prototype? ❌3️⃣ Animal.prototype? ❌4️⃣ Object.prototype? ✅ FOUND!(toString lives here — for EVERYONE)

And for something that exists nowhere:

leo.fly;

1️⃣→4️⃣ all ❌ … 5️⃣ Object.prototype's prototype = null 🛑 end of the road
→ returns undefined (or TypeError if you called it: leo.fly() 💥)

🔑 The three rules of the chain:

1. Searchbottom-up— object first, then each prototype in turn
2. First match wins— the search stops immediately (this IS overriding!)
3. The chain always ends atnull— and that's where "undefined" comes from

See Your Own Chain Right Now 👀

const arr =[];
let link = arr;
while (link !== null) {
  link = Object.getPrototypeOf(link);
  console.log(link === null ? "null 🛑" : link.constructor.name);
}// Array → Object → null 🛑 — every array's chain, revealed!

Shadowing: Overriding Up the Chain 🌗

Add a property to an instance with the same name as a prototype's — the instancewins, because the search stops at the first match:

function Student(name) {
  this.name = name;
}Student.prototype.species = "student";
// 📐 shared default
const s1 = new Student("Priya");
const s2 = new Student("Amit");
s2.species = "graduate 🎓";
// s2's OWN property now
console.log(s1.species);
// "student" — prototype's version
console.log(s2.species);
// "graduate 🎓" — s2's own shadows it!
console.log(s1.hasOwnProperty("species"));
// false — s1 borrows it
console.log(s2.hasOwnProperty("species"));
// true — s2 owns it ✅

Key insight:s2.species = "…"didn'tchangethe prototype — it created anew property on s2that shadows (hides) the prototype's version. The shared default remains intact for everyone else. This is exactly how class-field overrides worked in Lesson 56.

hasOwnProperty: "Is It Yours or Borrowed?" 🛂

console.log(s2.hasOwnProperty("name"));
// true — own property ✅
console.log(s2.hasOwnProperty("species"));
// true — shadowing property ✅
console.log(s2.hasOwnProperty("greet"));
// false — lives on the prototype
console.log(s2.hasOwnProperty("toString"));
// false — lives on Object.prototype

hasOwnPropertychecksonly the object itself— skipping the whole chain. (Ironically, the method itself is borrowed fromObject.prototype! 😄)

Why Built-In Methods "Just Work" 🌍

Now the opening mystery fully resolves. JavaScript's built-in types are all constructor functions with loaded prototypes:

[1,2,3] ──links──▶ Array.prototype   (map, filter, push, slice…)
                      │
                      ▼
                 Object.prototype    (toString, hasOwnProperty…)
                      │
                      ▼
                    null 🛑

const nums =[1, 2, 3];
// Every array in existence shares ONE copy of map:
const more =[9, 8, 7];
console.log(nums.map === more.map);
// true — same function! ✅
console.log(nums.map === Array.prototype.map);
// true — THE one on the prototype

Same story everywhere:

Millions of arrays, one sharedmap. Prototypes are why JavaScript stays memory-efficient. 🧠

💡 Andarr.hasOwnProperty("x")?That's anObjectmethod working on anArray— proof the chain really does flow array → object → null. You've been using prototype inheritance since your first.push().

⚠️ The Cardinal Sin: Never Modify Built-In Prototypes

Youcanadd methods to built-in prototypes — and you must not:

console.log(s2.hasOwnProperty("name"));
// true — own property ✅
console.log(s2.hasOwnProperty("species"));
// true — shadowing property ✅
console.log(s2.hasOwnProperty("greet"));
// false — lives on the prototype
console.log(s2.hasOwnProperty("toString"));
// false — lives on Object.prototype

hasOwnPropertychecksonly the object itself— skipping the whole chain. (Ironically, the method itself is borrowed fromObject.prototype! 😄)

Why Built-In Methods "Just Work" 🌍

Now the opening mystery fully resolves. JavaScript's built-in types are all constructor functions with loaded prototypes:

[1,2,3] ──links──▶ Array.prototype   (map, filter, push, slice…)
                      │
                      ▼
                 Object.prototype    (toString, hasOwnProperty…)
                      │
                      ▼
                    null 🛑

const nums =[1, 2, 3];
// Every array in existence shares ONE copy of map:
const more =[9, 8, 7];
console.log(nums.map === more.map);
// true — same function! ✅
console.log(nums.map === Array.prototype.map);
// true — THE one on the prototype

Same story everywhere:

Millions of arrays, one sharedmap. Prototypes are why JavaScript stays memory-efficient. 🧠

💡 Andarr.hasOwnProperty("x")?That's anObjectmethod working on anArray— proof the chain really does flow array → object → null. You've been using prototype inheritance since your first.push().

⚠️ The Cardinal Sin: Never Modify Built-In Prototypes

Youcanadd methods to built-in prototypes — and you must not:

Rex barks! 🐕Rex eats 🍽️truetruetruetrue

This is exactly whatclass Dog extends Animaldoes for you today — every line of it. Understanding this code means youtrulyunderstand classes. 🎓

Common Beginner Mistakes (And Fixes)

Quick Self-Check: Lesson 57 Quiz 🧠

1. What's the difference between__proto__andprototype?
2. What's the output?
   script.js

   Copy Code Run Online

   const arr =[1, 2];
   console.log(arr.hasOwnProperty("map"));
   console.log(typeof arr.map);

3. List, in order, the chain for"hello".toUpperCase().
4. What doesObject.create(null)create, and why is it useful?
5. Why must you never add methods toArray.prototype?

(Answers: 1.__proto__is an object instance's link to its prototype;prototypeis a property of constructor functions/classes that becomes the__proto__of instances they build (Object.getPrototypeOf(instance) === Constructor.prototype) · 2. false then "function" — map isn't the array's own property; it's inherited from Array.prototype · 3. the string → String.prototype (found toUpperCase here) → Object.prototype → null · 4. An object with NO prototype — no inherited methods at all; useful as a pure dictionary with zero inherited-key surprises · 5. It pollutes every array everywhere — future JavaScript versions or other libraries may collide with your method, and additions can leak into for…in loops)