Inheritance in JavaScript

Analogy categoryAnalogies

1. Introduction

Inheritance allows one class (the subclass or derived class) to reuse and extend the properties and methods of another class (the superclass or base class). In JavaScript, this is expressed with the extends keyword, and the super keyword is used inside a derived class to call the parent's constructor or methods. Inheritance promotes code reuse and models "is-a" relationships, such as a Circle being a kind of Shape.

🏏

Cricket analogy: A FastBowler class extending a base Bowler class reuses all the general bowling logic, run-up and delivery stride, while adding pace-specific extras, modeling the is-a relationship that Jasprit Bumrah is-a Bowler, just as Circle extends Shape in JavaScript.

2. Syntax

javascript

class Base {
  constructor(x) {
    this.x = x;
  }

  greet() {
    return `Base: ${this.x}`;
  }
}

class Derived extends Base {
  constructor(x, y) {
    super(x);       // must run before using `this`
    this.y = y;
  }

  greet() {
    return `${super.greet()} and Derived: ${this.y}`;
  }
}

3. Explanation

extends sets up the prototype chain so that Derived.prototype's internal prototype is Base.prototype, meaning instances of Derived inherit all of Base's instance methods. Calling super(...) inside a derived constructor invokes the parent class's constructor, which is what actually allocates and initializes this. super.methodName() inside an instance method calls the parent's version of that method, useful for extending rather than fully replacing behavior.

🏏

Cricket analogy: When a T20Specialist subclass calls super() in its constructor, it's like a young batter first going through standard academy training, the base Batter constructor, before adding T20-specific drills; calling super.bat() later still runs the fundamental technique before layering aggressive shot selection on top.

instanceof checks walk the entire prototype chain, so an instance of Circle (which extends Shape) is both instanceof Circle and instanceof Shape, but a Square instance is not instanceof Circle — sibling classes are not related to each other.

🏏

Cricket analogy: Virat Kohli is both instanceof Batter and instanceof CricketPlayer since Batter extends CricketPlayer, but a specialist instanceof Bowler check fails for him — sibling classes like Batter and Bowler aren't related just because they share a common CricketPlayer ancestor.

super() MUST be called before this is accessed anywhere in a derived class's constructor. In a derived class, this is not initialized until super() runs (because the parent constructor is what creates it). Accessing this before calling super() throws a ReferenceError: Must call super constructor in derived class before accessing 'this' or returning from derived constructor.

4. Example

javascript

class Shape {
  constructor(name) {
    this.name = name;
  }

  area() {
    return 0;
  }

  describe() {
    return `${this.name} has area ${this.area()}`;
  }
}

class Circle extends Shape {
  constructor(radius) {
    super("Circle");
    this.radius = radius;
  }

  area() {
    return Math.PI * this.radius ** 2;
  }
}

class Square extends Shape {
  constructor(side) {
    super("Square");
    this.side = side;
  }

  area() {
    return this.side * this.side;
  }
}

const shapes = [new Circle(2), new Square(3)];
shapes.forEach(s => console.log(s.describe()));

console.log(shapes[0] instanceof Shape);
console.log(shapes[0] instanceof Circle);
console.log(shapes[1] instanceof Circle);

class Broken extends Shape {
  constructor(name) {
    this.name = name; // uses `this` before super()
  }
}
try {
  new Broken("test");
} catch (e) {
  console.log(e instanceof ReferenceError);
}

5. Output

text

Circle has area 12.566370614359172
Square has area 9
true
true
false
true

6. Key Takeaways

extends links Derived.prototype to Base.prototype, enabling method inheritance.
super(...) calls the parent constructor and must run before this is used in a derived constructor.
super.method() calls the parent class's version of a method, enabling extension rather than full override.
instanceof checks the whole prototype chain: a Circle is both instanceof Circle and instanceof Shape.
Sibling subclasses (e.g. Square and Circle) are unrelated to each other via instanceof.