How Does Prototypal Inheritance Work?

Prototypal inheritance means that an object inherits behaviour from another object by holding a reference to it as its prototype. When a property is read and the object does not have it, the runtime looks along the chain of prototypes until it finds it. Nothing is copied, so the relationship stays live.

The chain is built with the create method, which takes a prototype object and returns a new object whose internal prototype points at it. Setting the prototype property directly does the same thing, although the create method is preferred because it does not trigger the setters that a plain assignment can trigger.

The useful mental model is delegation rather than copying. The child object does not contain the parent's data. It contains a link, and every read that misses goes through that link. That is why the parent and the child stay in sync, and it is also why a large hierarchy of deep prototypes makes lookups slower than a flat structure.

Two consequences to be ready for. A method on the prototype is shared by every object that inherits from it, so this is where you put behaviour that is common to a group. And because the prototype is just an object, you can add to it after the fact, which is how a lot of older libraries used to add methods to the built-in prototypes, something that modern style guides advise against because it makes the behaviour of unrelated code unpredictable.

The example builds a chain by hand, one link at a time, and then walks it to show that the lookups really do travel up it.

// Build a prototype chain by hand.
const speak = {
  speak() { return `${this.name} makes a sound`; },
};

const dog = Object.create(speak);
dog.name = "Rex";

console.log(dog.speak());                        // "Rex makes a sound"
console.log(Object.getPrototypeOf(dog) === speak);   // true

// Extend the chain one more level.
const puppy = Object.create(dog);
puppy.name = "Bit";

console.log(puppy.speak());                      // "Bit makes a sound"
console.log(Object.getPrototypeOf(puppy) === dog);   // true

// Walk the chain and count the links.
let depth = 0;
let node = puppy;
while (node) {
  depth += 1;
  node = Object.getPrototypeOf(node);
}
console.log(depth);   // 4 - puppy, dog, speak, Object.prototype

The last two lines show how the chain continues past the objects you created. The chain does not stop at your speak object. It continues to the object prototype, which is shared by every plain object, and then it ends because that object has no prototype of its own. So the depth is four rather than three.

Two design points come out of this. Because the chain is a delegation, the puppy inherits through the dog, so adding a method to the dog later is visible through the puppy as well. And because lookups travel the chain, a deep hierarchy costs more on every miss, which is the argument for keeping chains shallow.

One more thing to know. The prototype object is shared, so a method added to it affects every object that inherits from it. When you want behaviour on a single object, assign the function to the object itself instead of to its prototype. That distinction is the difference between a shared default and an override.