The prototype chain

Prototype links

Every ordinary JavaScript object has an internal link called [[Prototype]]. When you read a property and the object does not own that property, JavaScript follows the link to another object and tries again. That repeated search is the prototype chain.

This builds on Object basics, where you met in, Object.hasOwn, and inherited toString; Constructors & new, where new links instances to Constructor.prototype; Methods & this and The this keyword, where the call-site chooses this; and Scope, where the scope chain finds variables. Scope is for names. Prototypes are for properties.

1const animal = { eats: true };2const rabbit = { __proto__: animal, jumps: true };3console.log(Object.getPrototypeOf(rabbit) === animal);4console.log(rabbit.eats);

Start with two objects. rabbit owns jumps. It does not own eats, but its prototype, animal, does. It also inherits familiar methods like toString from Object.prototype, which sits farther up the chain.

1const animal = { eats: true, walk() { this.isWalking = true; } };Run2const rabbit = Object.create(animal);3rabbit.jumps = true;4 5console.log(rabbit.jumps);6console.log(rabbit.eats);7console.log(typeof rabbit.toString);8console.log(rabbit.fly);

Reading and writing are not mirror images. Reads climb the chain. Ordinary writes place a new property on the receiver, which can shadow an inherited property with the same name.

1const animal = { eats: true };Run2const rabbit = Object.create(animal);3 4rabbit.eats = false;5console.log(rabbit.eats);6console.log(animal.eats);7 8delete rabbit.eats;9console.log(rabbit.eats);

1const animal = {2  set mood(value) {3    this.savedMood = value;4  },5};6const rabbit = Object.create(animal);7rabbit.mood = "curious";8console.log(rabbit.savedMood);9console.log(Object.hasOwn(rabbit, "mood"));

An own property is stored directly on the object. An inherited property is found by following the prototype chain. Both are read with the same dot syntax, so you need deliberate checks when ownership matters.

1const animal = { eats: true, walk() {} };2const rabbit = Object.create(animal);3rabbit.jumps = true;4 5let current = rabbit;6while (current !== null) {7  // Check own properties, then climb.8  current = Object.getPrototypeOf(current);9}

hasOwnProperty, isPrototypeOf & propertyIsEnumerable

Different tools answer different questions. Use the exact question you mean: “does this object own it?”, “can lookup find it?”, “is this object in the chain?”, or “will enumeration include it?”

1const animal = { eats: true };2Object.defineProperty(animal, "secret", {3  value: "warehouse",4  enumerable: false,5});6const rabbit = Object.create(animal);7rabbit.jumps = true;8 9console.log(Object.hasOwn(rabbit, "jumps"));10console.log(Object.hasOwn(rabbit, "eats"));11console.log("eats" in rabbit);12console.log(Object.keys(rabbit).join(","));13console.log(animal.isPrototypeOf(rabbit));14console.log(animal.propertyIsEnumerable("secret"));

Object.hasOwn is safer than obj.hasOwnProperty because it still works for null-prototype objects and objects that define their own property named hasOwnProperty. propertyIsEnumerable is stricter: the property must be own and enumerable.

A method can be found on a prototype but still act on the object before the dot. In rabbit.walk(), lookup finds walk on animal, but the call-site sets this to rabbit. The method below is inline on purpose so production minifiers cannot detach it and change the this demo.

1const animal = {Run2  walk() {3    this.isWalking = true;4  },5};6const rabbit = Object.create(animal);7 8rabbit.walk();9console.log(rabbit.isWalking);10console.log(animal.isWalking);

This is why shared prototype methods are useful: one function can serve many objects, while state such as isWalking lands on the receiver.

Where you’ll use this

Prototype lookup explains why arrays all have map, why dates all have toISOString, why constructor instances share methods, and why classes can store methods once instead of copying them to every object. The next lesson, F.prototype & constructors, connects new to this link.

It also prevents bugs. A mutable object stored on a prototype is shared by every inheriting object. Mutating it through one child mutates the shared value for all children.

1const animal = { skills: [] };2const rabbit = Object.create(animal);3const fox = Object.create(animal);4 5rabbit.skills.push("jump");6fox.skills.push("sneak");7console.log(rabbit.skills.join(","));

1const animal = { skills: [] };2const rabbit = Object.create(animal);3const fox = Object.create(animal);4 5rabbit.skills = [];6fox.skills = [];7rabbit.skills.push("jump");8fox.skills.push("sneak");9console.log(rabbit.skills.join(","));

Common misconceptions

Read each code sample as a chain trace: where is the property stored, and does this operation read, write, delete, or call?

Key takeaways

• [[Prototype]] is an internal object link used for property lookup.
• Lookup checks own properties first, then prototypes, and returns undefined after null.
• Shadowing happens when an own property hides an inherited one.
• Object.hasOwn checks ownership; in checks availability through the chain.
• Inherited methods get this from the call-site, so rabbit.walk() writes to rabbit.

Up next: F.prototype & constructors.