The Prototype Chain

Every object in JavaScript holds a hidden link to another object, and when you ask for a property that is not there, the engine does not just give up. It follows that link and asks the next object the same question, and keeps going until it finds the property or runs out of objects to ask. That chain of links is called the prototype chain, and it is also exactly what class builds for you behind the syntax.

We will build a chain by hand with Object.create, then look at the same chain wearing class syntax, so the lookup stops being invisible and starts being something you can trace yourself.

Following the Chain

const animal = {
  speak() {
    return `${this.name} makes a sound`
  },
}

const dog = Object.create(animal)
dog.name = "Rex"

console.log(dog.speak()) // Rex makes a sound

dog has no own speak property. When we call dog.speak(), the engine looks at dog itself, does not find speak there, then follows the internal [[Prototype]] link to animal, finds speak on it and runs that function with this still pointing at dog. Object.create(animal) is what sets that link in the first place, and you can check it directly.

console.log(Object.getPrototypeOf(dog) === animal) // true

class Builds the Same Chain

Under the hood, a class is a constructor function with its methods placed on a shared prototype object, so writing a class does not avoid the chain from the example above, it builds the exact same kind of link with cleaner syntax on top.

class Animal {
  constructor(name) {
    this.name = name
  }

  speak() {
    return `${this.name} makes a sound`
  }
}

const cat = new Animal("Mia")

console.log(cat.speak()) // Mia makes a sound
console.log(Object.getPrototypeOf(cat) === Animal.prototype) // true

speak lives once on Animal.prototype, it is not copied onto every instance, and cat's own prototype points at that same shared object. extends just adds one more link on top: a subclass's prototype points at the parent class's prototype, so the lookup keeps walking up the chain the same way, until it eventually reaches Object.prototype and then null, where the search stops.

Conclusion

The prototype chain is the one mechanism behind property lookup, inheritance and class, not three separate features that happen to look alike. Once you can picture dog pointing at animal, pointing at Object.prototype, pointing at null, a whole class hierarchy is just that same picture wearing nicer syntax. If you want the syntax side of this, I already wrote about public and private methods in this post about class.

Happy coding!