JavaScript Class Inheritance

Class inheritance allows you to create a new class that inherits properties and methods from an existing class. The child class (subclass) extends the parent class (superclass) using the extends keyword.

The extends Keyword

The extends keyword is used to create a child class that inherits from a parent class. The child class inherits all methods and properties from the parent class.

Basic Inheritance with extends
class Animal {
  constructor(name) {
    this.name = name;
  }

  speak() {
    return this.name + ' makes a sound.';
  }
}

class Dog extends Animal {
  bark() {
    return this.name + ' barks!';
  }
}

const d = new Dog('Rex');
console.log(d.speak());
console.log(d.bark());

The super() Method

The super() method is used to call the constructor of the parent class. If a child class has a constructor, it must call super() before using 'this'. The super keyword can also be used to call parent methods.

Using super() in Constructor
class Vehicle {
  constructor(brand) {
    this.brand = brand;
  }

  describe() {
    return 'This is a ' + this.brand;
  }
}

class Car extends Vehicle {
  constructor(brand, model) {
    super(brand);
    this.model = model;
  }

  fullDescription() {
    return this.brand + ' ' + this.model;
  }
}

const myCar = new Car('Toyota', 'Camry');
console.log(myCar.describe());
console.log(myCar.fullDescription());

Method Overriding

A child class can override a method from the parent class by defining a method with the same name. This is called method overriding. The child class version replaces the parent class version for instances of the child class.

Overriding Parent Methods
class Shape {
  area() {
    return 0;
  }

  describe() {
    return 'I am a shape with area: ' + this.area();
  }
}

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

  // Override parent method
  area() {
    return Math.PI * this.radius * this.radius;
  }
}

const c = new Circle(5);
console.log(c.area().toFixed(2));
console.log(c.describe());

Calling Parent Methods with super

You can call a parent class method from within an overridden method using super.methodName(). This is useful when you want to extend the parent behavior rather than completely replace it.

Calling Parent Methods
class Employee {
  constructor(name, salary) {
    this.name = name;
    this.salary = salary;
  }

  getInfo() {
    return this.name + ' earns $' + this.salary;
  }
}

class Manager extends Employee {
  constructor(name, salary, department) {
    super(name, salary);
    this.department = department;
  }

  getInfo() {
    // Call parent method and extend it
    return super.getInfo() + ' in ' + this.department;
  }
}

const mgr = new Manager('Alice', 90000, 'Engineering');
console.log(mgr.getInfo());

instanceof with Inheritance

The instanceof operator checks whether an object is an instance of a class. With inheritance, an instance of a child class is also an instance of the parent class.

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

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

class Cat extends Animal {
  constructor(name) {
    super(name);
  }
}

const rex = new Dog('Rex', 'Labrador');
console.log(rex instanceof Dog);
console.log(rex instanceof Animal);
console.log(rex instanceof Cat);
console.log(rex instanceof Object);
ConceptDescription
extendsCreates a child class from a parent class
super()Calls the parent class constructor
super.method()Calls a parent class method
Method overridingChild redefines a parent method
instanceofChecks class membership (includes parent classes)
📝 Note: If a child class defines a constructor, it must call super() before accessing 'this'. Failing to do so will result in a ReferenceError. If no constructor is defined in the child class, the parent constructor is automatically called.
Exercise:
What must you call in a child class constructor before using 'this'?
Try it YourselfCtrl+Enter to run
Click Run to see the output here.