Class Inheritance in JavaScript

In JavaScript, class inheritance is a mechanism that allows one class referred to as the "child" class (or "subclass") to inherit properties and methods from another class referred to as the "parent" class (or "superclass").

It enables code reuse and allows developers to create a hierarchy of classes that share common functionality, while allowing each subclass to have its own specialized behaviors.

Create a child class

To create a class that inherits the fields and methods from another class, you can use the extends keyword:

class ParentClass {
  //
}

class ChildClass extends ParentClass {
  //
}

The super keyword

The super keyword enables the child class to access the properties and methods defined in the parent class.

When used within the child's constructor, the super() method allows the child to invoke the parent constructor to ensure that its properties are correctly initialized.

class ParentClass {
  constructor(...parameters?) {
    // ...
  }
}

class ChildClass extends ParentClass {
  constructor(...parameters?) {
    super(...parameters?);
    // ...
  }
}

Note: In a child class, the super() method must be invoked before using the this keyword.

Example

Let's consider this script:

class Employee {
  name;
  salary;

  constructor(name, salary) {
    this.name = name;
    this.salary = salary;
  }
}

class Developer extends Employee {  
  speciality;

  constructor(name, salary, speciality) {
    super(name, salary);
    this.speciality = speciality;
  }

  sayHi() {
    console.log(`Hi! My name is ${this.name} and I make $${this.salary} as a ${this.speciality} developer!`);
  }
}

let dev = new Developer('John', '75000', 'back-end');

dev.sayHi();

When executed, it will:

1. Define a class named Employee that implements:

   • Two public fields named name and salary.
   • A constructor() method used to initialize these fields.

2. Define a class named Developer that inherits from the Employee class, and that implements:

   • A public field named speciality.
   • A constructor() method that first invokes the parent constructor, then initializes the speciality field.
   • A sayHi() method that outputs the value of the inherited name and salary fields, and the class-specific speciality field.

3. Declare a variable named dev that contains an instance of the Developer class.

4. Invoke the sayHi() method of the dev instance.

Which will produce this output:

Hi! My name is John and I make $75000 as a back-end developer!

Override parent methods

Method overriding is a mechanism that allows a subclass to provide a specific implementation of a method that is already defined in its superclass.

class ParentClass {
  method() {
    // implementation
  }
}

class ChildClass extends ParentClass {
  method() {
    // new implementation
  }
}

Note: When used within a child class method, the super keyword allows the child to invoke a parent method that it has overridden

class ChildClass extends ParentClass {
  method() {
    super.method();
  }
}

Example

Let's consider this script, mostly similar to the previous one:

class Employee {
  name;
  salary;

  constructor(name, salary) {
    this.name = name;
    this.salary = salary;
  }

  work() {
    console.log('I am currently busy working...');
  }
}

class Developer extends Employee {  
  speciality;

  constructor(name, salary, speciality) {
    super(name, salary);
    this.speciality = speciality;
  }

  sayHi() {
    console.log(`Hi! My name is ${this.name} and I make $${this.salary} as a ${this.speciality} developer!`);
  }

  work() {
    console.log('I am currently busy coding...');
  }
}

let dev = new Developer('John', '75000', 'back-end');

dev.sayHi();
dev.work();

When executed, the Developer class will override the work() method of the Employee class by redeclaring it with a new set of instructions.

Which will produce this output:

Hi! My name is John and I make $75000 as a back-end developer!
I am currently busy coding...