Enjoy 20% off all plans by following our social accounts!
Quiz

Explain the concept of inheritance in ES2015 classes

Topics
JavaScriptOOP
Edit on GitHub

TL;DR

Inheritance in ES2015 classes allows one class to extend another, enabling the child class to inherit properties and methods from the parent class. This is done using the extends keyword. The super keyword is used to call the constructor and methods of the parent class. Here's a quick example:

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


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


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


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


const dog = new Dog('Rex', 'German Shepherd');
dog.speak(); // Rex barks.

Inheritance in ES2015 classes

Basic concept

Inheritance in ES2015 classes allows a class (child class) to inherit properties and methods from another class (parent class). This promotes code reuse and a hierarchical class structure.

Using the extends keyword

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

class ParentClass {
  constructor() {
    this.parentProperty = 'I am a parent property';
  }


  parentMethod() {
    console.log('This is a parent method');
  }
}


class ChildClass extends ParentClass {
  constructor() {
    super(); // Calls the parent class constructor
    this.childProperty = 'I am a child property';
  }


  childMethod() {
    console.log('This is a child method');
  }
}


const child = new ChildClass();
console.log(child.parentProperty); // I am a parent property
child.parentMethod(); // This is a parent method

Using the super keyword

The super keyword is used to call the constructor of the parent class and to access its methods. This is necessary when you want to initialize the parent class properties in the child class.

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


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


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


  speak() {
    super.speak(); // Calls the parent class method
    console.log(`${this.name} barks.`);
  }
}


const dog = new Dog('Rex', 'German Shepherd');
dog.speak();
// Rex makes a noise.
// Rex barks.

Method overriding

Child classes can override methods from the parent class. This allows the child class to provide a specific implementation of a method that is already defined in the parent class.

class Animal {
  speak() {
    console.log('Animal makes a noise.');
  }
}


class Dog extends Animal {
  speak() {
    console.log('Dog barks.');
  }
}


const dog = new Dog();
dog.speak(); // Dog barks.

Further reading

Edit on GitHub
Previous
Next