Module 6 · Objects & Prototypes

The Prototype Chain

Intermediate11m read8m practice19m total

Prototype ChainLookupShadowingMutation

Introduction

The prototype chain is the ordered lookup path JavaScript follows when reading a property. The engine checks the object itself first, then its prototype, then the prototype's prototype, continuing until it finds the property or reaches null.

This is the mechanism behind inherited methods, class instances, constructor-function inheritance, and many classic output-prediction puzzles.

Why This Matters

A strong prototype-chain model lets you answer questions about method lookup, property shadowing, instanceof, shared mutable prototype state, and why adding a property to one object can hide but not modify a property higher in the chain.

Theory

Lookup algorithm

For a read like obj.name, JavaScript first checks whether obj has an own property named name. If not, it repeats the check on Object.getPrototypeOf(obj). The search stops at the first match or at null.

Shadowing

If a child object has an own property with the same name as a prototype property, the own property shadows the inherited one. Deleting the own property reveals the inherited property again. Assignment usually creates or updates an own property on the receiver rather than mutating the prototype.

Shared prototype mutation

If a prototype property is a mutable object, all children that inherit that property see the same object. Mutating that shared object through one child is visible through another child. Assigning a new property on one child shadows the prototype property for that child only.

Method calls and `this`

Even when a method is found on a prototype, this is usually the receiver before the dot. In child.method(), the function may live on parent, but this inside the call is child.

End of the chain

The top of most ordinary object chains is Object.prototype, whose prototype is null. Null-prototype objects skip Object.prototype entirely.

Visual Diagrams

Prototype chain lookup

beagle
+----------------------+
| own name: 'Scout'    |
+----------------------+
          |
          | missing property?
          v
dog
+----------------------+
| barks: true          |
+----------------------+
          |
          v
animal
+----------------------+
| eats: true           |
+----------------------+
          |
          v
Object.prototype
+----------------------+
| toString, valueOf    |
+----------------------+
          |
          v
        null

Reads walk down this chain until the first matching property is found.

Code Examples

Own property checks vs chain checks

in sees through the chain; an own-property check does not.

Loading…

Shadowing and revealing inherited properties

An own property hides the prototype property until the own property is deleted.

Loading…

Playground

Loading editor…

Console

Press Run to execute the code and see output here.

Output Prediction

Predict the output #1

javascript

1const shared = { skills: [] };
2const ada = Object.create(shared);
3const grace = Object.create(shared);
4 
5ada.skills.push('js');
6console.log(grace.skills.join(','));
7 
8ada.skills = ['react'];
9console.log(ada.skills.join(','));
10console.log(grace.skills.join(','));

Predict the output #2

javascript

1const parent = { level: 1 };
2const child = Object.create(parent);
3 
4console.log(child.level);
5child.level = 2;
6console.log(child.level);
7console.log(parent.level);
8 
9delete child.level;
10console.log(child.level);

Coding Exercises

Find which object owns a property

Medium

Implement findPropertyOwner(obj, key) so it returns the first object in the prototype chain that owns key, or null if the property does not exist anywhere in the chain.

Interview Questions

1How does property lookup work in the prototype chain?

JavaScript first checks the receiver's own properties. If the key is missing, it checks the receiver's prototype, then that object's prototype, and so on until it finds a match or reaches null. The first match wins, which is why own properties shadow inherited ones.

Asked at:GoogleAmazonMeta

Follow-ups

What is property shadowing?
How does `this` behave when a method is found on a prototype?

2Why is shared mutable data on a prototype dangerous?

All objects that inherit that property see the same referenced object. Mutating it through one instance mutates the shared object for all other instances. Instance-specific arrays or objects should be created per instance, usually in the constructor or factory.

Asked at:MicrosoftNetflix

Quiz

1. If an object and its prototype both have a property named `x`, which value does `obj.x` return?

2. Where does a normal object prototype chain usually end?

Summary

Property reads check own properties first, then walk the prototype chain.
Own properties shadow inherited properties with the same name.
Mutating inherited reference values can affect every object sharing that prototype.
Most ordinary object chains eventually reach `Object.prototype` and then `null`.

Cheat Sheet

Lookup: own object → prototype → next prototype → null.

Shadowing: own property with same key hides inherited property.

Reveal inherited: delete the own shadowing property.

Own check: Object.hasOwn(obj, key) or borrowed hasOwnProperty.

Chain check: key in obj.

Shared mutable warning: arrays/objects on prototypes are shared by inheritors.