JavaScript
The prototype chain
Learn how property lookup walks the prototype chain.
The prototype chain
When you access a property, JavaScript first checks the object itself. If it is not there, it moves to the prototype, then to the prototype's prototype. This walk is called the prototype chain.
const base = { kind: 'mammal' };
const child = Object.create(base);
child.kind; // 'mammal' — came from base
The chain ends at an object whose prototype is null. Object.prototype is the root of most chains.
Shadowing
If you add to an object a property that already exists on its prototype, this is called shadowing. The object's own property hides the prototype's.
const base = { speed: 10 };
const child = Object.create(base);
child.speed = 25;
child.speed; // 25 — own property
base.speed; // 10 — unchanged
The assignment writes only on child; base is unaffected. You can still read the prototype's value through Object.getPrototypeOf(child).speed.
Exercise Build a two-level prototype chain
Define animalProto with a kind: 'animal' property. Create dogProto with Object.create(animalProto) and add a dogProto.bark function that returns 'woof'. Create rex with Object.create(dogProto); then assign rex.name = 'Rex' as its own property. Finally call console.log(rex.kind), console.log(rex.bark()) and console.log(rex.name).
Show example solution
const animalProto = { kind: 'animal' };
const dogProto = Object.create(animalProto);
dogProto.bark = function () {
return 'woof';
};
const rex = Object.create(dogProto);
rex.name = 'Rex';
console.log(rex.kind);
console.log(rex.bark());
console.log(rex.name);
Test yourself
-
If a property exists on both the object and its prototype, which is used?
const base = { speed: 10 };
const child = Object.create(base);
child.speed = 25;
child.speed;
- The prototype's value
- The sum of both
- undefined
- The object's own value
Show answer
The object's own value — Correct! The object's own property shadows the prototype's.
-
hasOwnProperty check
if (child.____('speed')) {
console.log('own property');
}
Show answer
if (child.hasOwnProperty('speed')) {
console.log('own property');
}
-
Match the chain terms
- lookup
- chain search
- shadowing
- own property wins
- Object.prototype
- chain root
- null prototype
- chain end
Next lesson: Prototype pollution
