Class Inheritance

By the end of this lesson, you will be able to create a JavaScript subclass with extends, call the parent constructor with super, and override or add methods safely.

What it is

Class inheritance lets one class reuse and extend another. The class being extended is the parent, base, or superclass. The new class is the child, derived, or subclass. In JavaScript, class Child extends Parent creates a prototype chain: instances of Child can use methods from Parent unless they define their own.

Related terms: super, constructor, prototype chain, method override, and instanceof.

Why it matters

• Reduces repeated code by sharing common behavior in a parent class.
• Models hierarchies such as Animal to Dog to Puppy.
• Lets subclasses add specialized fields and methods without changing the parent.
• Supports polymorphism: subclasses can implement the same method name differently.

Syntax or steps

The smallest useful pattern is:

class Parent {
  constructor(value) {
    this.value = value;
  }
}

class Child extends Parent {
  constructor(value, extra) {
    super(value);
    this.extra = extra;
  }
}

1. Declare the parent class with shared properties and methods.
2. Declare the child class using extends Parent.
3. If the child has a constructor, call super() before using this.
4. Add child-specific properties after super().
5. Override parent methods by defining methods with the same name.

Example

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

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

class Dog extends Animal {
  constructor(name, breed) {
    super(name);
    this.breed = breed;
  }

  speak() {
    return `${this.name} barks.`;
  }

  fetch(item) {
    return `${this.name} fetches ${item}.`;
  }
}

const rex = new Dog("Rex", "Labrador");

console.log(rex.speak());
console.log(rex.fetch("ball"));
console.log(rex instanceof Animal);

• class Animal defines the parent with a name property and a generic speak() method.
• class Dog extends Animal makes Dog inherit from Animal.
• super(name) calls the parent constructor, setting this.name.
• this.breed = breed adds a property only Dog instances have.
• speak() overrides the parent method with a dog-specific message.
• fetch() is a new method available only on Dog.

Common mistakes

• Forgetting super() in a child constructor. Fix: call super() before using this.
• Using this before super(). Fix: initialize parent state first, then child state.
• Overriding a method but losing useful parent behavior. Fix: call super.methodName() inside the override when needed.
• Assuming private fields are inherited. Fix: use methods if subclasses need access; true private fields are not accessible from subclasses.

When to use it

Use class inheritance when there is a clear “is-a” relationship and shared behavior is stable. If you only need to reuse behavior, composition may be simpler.

Practice

Guided exercise: create a Vehicle class with a name property and a move() method. Then create a Bicycle class that extends Vehicle, adds a gears property, and overrides move().

Expected output for new Bicycle("Roadster", 18).move() could be:

Roadster moves on two wheels.

Challenge: add a Car class that extends Vehicle, adds a doors property, and calls the parent move() method before returning a car-specific message.

Solution hint: use super.move() inside the child method.

Quick check

Question: Why must a child constructor call super() before using this?

Answer: Because the parent constructor initializes the inherited part of the instance; JavaScript requires that setup before the child can safely add or read properties on this.

Summary

JavaScript class inheritance uses extends to connect a child class to a parent class and super to call parent constructors or methods. It is useful for shared behavior and specialization, but should be used when the hierarchy is clear and not too deep.