How Do extends and super Work?

The extends keyword sets up the prototype link between a class and its parent. The class becomes the parent prototype, and the parent constructor becomes the parent of the class constructor, so the chain continues upwards.

class Shape {
  constructor(sides) {
    this.sides = sides;
  }
  describe() {
    return `a shape with ${this.sides} sides`;
  }
}

class Square extends Shape {
  constructor(size) {
    super(4);               // call the parent constructor first
    this.size = size;
  }
  describe() {
    return `a square of ${this.size}`;
  }
}

const square = new Square(10);
console.log(square.describe());        // "a square of 10"
console.log(square.sides);             // 4
console.log(square instanceof Shape);   // true

The super keyword has two jobs. Inside a constructor, calling super passes the arguments to the parent constructor and runs it. Inside a method, super.method() calls the parent version of that method with the same receiver, which is how you extend a method rather than replace it.

The order matters. The parent constructor has to run before the child constructor's own body, because the parent sets up state that the child may rely on. In the example, the parent sets sides and the child then reads it when it overrides describe.

There is a subtlety with super in a method. The parent method is looked up on the prototype of the home object at the moment the method runs, and it is called with the current this. That is why super.describe() inside a method of a derived class finds the parent implementation rather than looping back to itself.

Because before the parent constructor has run, the object does not exist yet in a usable state. The parent constructor is what creates the instance and links its prototype, and until it has finished you do not have an object to attach properties to.

In practice, the language enforces it. A derived class constructor that references this before calling super throws a ReferenceError, and a constructor that never calls super at all throws a ReferenceError when it returns, because the instance was never initialised. That is a deliberate guard against a subtle class of bugs, where a parent constructor sets up state and the child quietly overwrites or ignores it.

Three related rules are worth knowing. Super has to be called before this is used, and it can only be called once per constructor. A derived constructor must call super before it returns, either explicitly or by returning an object, which is the pattern that lets you skip the parent constructor entirely and build the instance yourself.

There is one more subtlety with super in a derived class that has no explicit constructor. If you write a class that extends another and declare no constructor, the language generates one that forwards the arguments to the parent, so new Derived(1, 2) works as you would expect. If you do declare a constructor, you take over that responsibility, which is why forgetting super is such a common beginner mistake.