Prototypes and inheritance
Inheritance in JavaScript works not by copying, as in classical languages, but by delegation: every object has a hidden [[Prototype]] link to another object, and when it fails to find a property on itself, the engine follows that link onward. This is how shared methods, class, and instanceof all work — they are layers over a single chain of links.
This topic covers the mechanics of prototypes from the ground up: how __proto__ differs from .prototype, how lookup climbs the chain, how to link objects via Object.create, how to freeze an object, and how to intercept operations with Proxy. For the base mechanics of objects themselves — descriptors, copying — see the Objects & Prototypes topic. The full map is in the layers below.
Topic map
__proto__versus.prototype— an instance's link to its prototype versus a constructor's property.- The prototype chain — how property lookup climbs
[[Prototype]]up tonull. - Prototypal inheritance —
Object.createandsetPrototypeOf, live method sharing. - Object extensibility — the
preventExtensions→seal→freezeladder and the shallowness of freezing. - Proxy — a wrapper with traps (
get,set,has) intercepting operations on an object. - The enum pattern — emulating an enum with a frozen object and
Symbol.
Common traps
| Mistake | Consequence |
|---|---|
Confusing __proto__ and .prototype | .prototype exists only on constructor functions, __proto__ on an instance |
| Expecting a subclass method to override an arrow class field | An arrow field is an own property; it shadows the prototype method |
Treating Object.freeze as deep | The freeze is shallow — a nested object stays mutable |
Changing the prototype on the fly via setPrototypeOf in hot code | It sharply breaks engine optimisations — an expensive operation |
Thinking a missing Proxy trap blocks the operation | A missing trap passes through to the target unchanged |
Using a plain object as an enum without freeze | The values can be overwritten, so the "constants" are no longer constant |
Interview relevance
Prototypes are the way to tell someone who understands JavaScript's object model from someone who memorised class. A candidate who explains new as "it creates an object and links its [[Prototype]] to Ctor.prototype" immediately shows depth.
Typical checks:
- The difference between
__proto__(an instance's link) and.prototype(a constructor's property). - How property lookup climbs the chain and where it ends.
- How to wire inheritance via
Object.create. - How
preventExtensions,seal, andfreezediffer. - What a
Proxyis and how its traps work.
Common wrong answer: "__proto__ and prototype are the same thing." In fact .prototype exists only on functions and sets the prototype of future instances, while __proto__ is a specific instance's link to its prototype. For a new object, (new Foo).__proto__ === Foo.prototype.