Prototype Chain Fundamentals

Med

Every JavaScript object has an internal link to another object called its prototype. When you access a property, JavaScript first looks on the object itself. If not found, it looks on the prototype, then the prototype's prototype, and so on up the chain until it finds the property or reaches null. This is the foundation of JavaScript's inheritance model.

Interactive Visualization

Prototype Chain
dog
name:"Rex"
bark:fn()
__proto__: → Animal.prototype
Creating dog instance with new Animal("Rex")
const dog = new Animal("Rex")
1 / 4
Key Insight: Every constructor instance links through Constructor.prototype to Object.prototype to null.

Key Points

  • Every object has [[Prototype]] (access via __proto__ or Object.getPrototypeOf)
  • __proto__ is the object it inherits from
  • .prototype is a property of constructor functions only
  • Property lookup walks up the prototype chain
  • Object.prototype is at the top of most chains
  • Object.create(proto) creates object with specific prototype

Code Examples

__proto__ vs .prototype

// __proto__ is on ALL objects - points to prototype it inherits from
const obj = {};
obj.__proto__ === Object.prototype;  // true

// .prototype is only on constructor functions
function Person(name) {
  this.name = name;
}

Person.prototype.greet = function() {
  return "Hi, I'm " + this.name;
};

const alice = new Person("Alice");

// alice's __proto__ points to Person.prototype
alice.__proto__ === Person.prototype;  // true

// Person.prototype's __proto__ points to Object.prototype
Person.prototype.__proto__ === Object.prototype;  // true

// Visual chain:
// alice → Person.prototype → Object.prototype → null

__proto__ is the prototype link on instances. .prototype is the template object for instances created with new.

Object.create()

const animal = {
  eats: true,
  walk() {
    console.log("Animal walks");
  }
};

// Create object with animal as prototype
const rabbit = Object.create(animal);
rabbit.jumps = true;

console.log(rabbit.jumps);  // true (own property)
console.log(rabbit.eats);   // true (from prototype)
rabbit.walk();              // "Animal walks" (from prototype)

// Check prototype
Object.getPrototypeOf(rabbit) === animal;  // true

// Visual:
// rabbit → animal → Object.prototype → null

Object.create(proto) creates a new object with proto as its prototype.

The Prototype Chain

const grandparent = { generation: 1 };
const parent = Object.create(grandparent);
parent.generation = 2;
const child = Object.create(parent);
child.generation = 3;

// Property lookup walks up the chain
console.log(child.generation);       // 3 (own property)
console.log(child.__proto__.generation);  // 2 (parent's)
console.log(child.__proto__.__proto__.generation);  // 1 (grandparent's)

// The chain:
// child → parent → grandparent → Object.prototype → null

// Setting always happens on the object itself
child.name = "Child";
console.log(parent.name);  // undefined (not inherited!)

Property lookup walks up the chain. Property setting always creates on the object itself.

Common Mistakes

  • Confusing __proto__ with .prototype
  • Thinking setting a property updates the prototype (it creates own property)
  • Not understanding that Object.prototype is the root

Interview Tips

  • Clearly distinguish __proto__ (instance) from .prototype (constructor property)
  • Draw the prototype chain diagram
  • Know that Object.create() sets __proto__
  • Understand that setting properties creates own properties