The Prototype Chain

Discover JavaScript's hidden inheritance system. Learn how objects magically share methods by searching up an invisible chain of prototypes.

JavaScript8 min readConcept 22 of 62

What is a Prototype?

In JavaScript, almost every object has a hidden internal property called [[Prototype]] (historically accessed via __proto__).

This property is simply a reference (a pointer) to another object. That other object is called its 'prototype', and it acts as a fallback or parent.

The Property Lookup Algorithm

When you try to read a property on an object (like myArray.push()), JavaScript first checks the object itself.

If it doesn't find the property there, it doesn't immediately give up. Instead, it follows the __proto__ link to the prototype object and looks there.

If it still doesn't find it, it checks *that* object's prototype, walking up the 'Prototype Chain' until it either finds the property or hits null.

Where do array methods come from?

When you create an array const arr = [], it is born with a __proto__ pointing to Array.prototype.

Array.prototype is a massive object that holds all the standard array methods: .push(), .map(), .filter(), etc.

Because of the prototype chain, your tiny empty array instantly gains access to all those methods without having to copy them into its own memory!

The Fallback Mechanism

Trace the path JavaScript takes when you call .toString() on a simple array, watching it walk up the invisible prototype chain.

The Fallback Mechanism

// 1. Create an array
const arr = [1, 2];
// 2. Call a method not defined on the array itself
arr.hasOwnProperty("length");
How does an array know about hasOwnProperty? It searches up the prototype chain!
Property Lookup: arr.hasOwnProperty
✗
Level 1: Instance
arr
01
12
length2
__proto__Points Up
✗
Level 2: Prototype
Array.prototype
pushƒ()
mapƒ()
filterƒ()
__proto__Points Up
✓
Level 3: Grand-Prototype
Object.prototype
toStringƒ()
hasOwnPropertyƒ()
__proto__null (END)
iWhen calling arr.hasOwnProperty(), JS checks the array (nope), then Array.prototype (nope), and finally finds it on Object.prototype!

Check yourself

Pick an answer to lock it in, then read why. Getting one wrong is part of how it sticks.

  1. 1What does JavaScript do if you try to read a property that doesn't exist on an object?
  2. 2Why don't we have to copy the code for `.push()` into every single array we create?
  3. 3What is at the very top of almost every prototype chain?

Remember this

  • JavaScript uses Prototypal Inheritance, not classical class-based inheritance.
  • Every object has a hidden __proto__ property pointing to a fallback object.
  • Property lookups walk up this chain until the property is found or null is reached.
  • Methods like .push() and .map() live on Array.prototype, not on the individual arrays.
  • The chain usually terminates at Object.prototype, which points to null.

Done with this concept?

Mark it complete to track your progress. No login needed.