What is Class Inheritance in JavaScript?

Inheritance is a key concept in Object-Oriented Programming (OOP), and it allows you to create new classes based on existing ones. In JavaScript, class inheritance can be achieved using the extends keyword.

Introduction

Class inheritance is an important concept in Object-Oriented Programming (OOP) that allows you to create new classes based on existing ones. This technique can help you write more efficient and organized code, as it allows you to reuse code and avoid code duplication.

Understanding Inheritance

Before we dive into class inheritance in JavaScript, let’s first understand the different types of inheritance.

Single Inheritance

Single inheritance is the simplest form of inheritance, where a subclass inherits from a single superclass. This means that the subclass will have all the properties and methods of the superclass.

Multiple Inheritance

Multiple inheritance is a more complex form of inheritance, where a subclass inherits from multiple superclasses. This can lead to complications and conflicts, and is not supported in JavaScript.

Multilevel Inheritance

Multilevel inheritance is a type of inheritance where a subclass inherits from a superclass, which in turn inherits from another superclass. This can continue for multiple levels.

Creating Classes in JavaScript

Before we can start using class inheritance in JavaScript, we need to first understand how to create classes. In JavaScript, we can use the class keyword to create a new class.

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

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

In the example above, we have created a class called Animal. This class has a constructor that takes two arguments, name and age, and sets them as properties on the class. It also has a method called speak that logs a message to the console.

Using the `extends` Keyword

To create a subclass that inherits from a superclass in JavaScript, we use the extends keyword. Let’s create a subclass called Dog that inherits from the Animal superclass.

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

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

In the example above, we have created a subclass called Dog that extends the Animal superclass. We have also added a new property called breed to the Dog class. Notice that we have used the super keyword to call the constructor of the superclass and pass in the name and age arguments.

Overriding Methods in Subclasses

When creating a subclass, you can override methods from the superclass by creating a new method with the same name in the subclass. Let’s override the speak method in the Dog subclass.

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

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

In the example above, we have created a new speak method in the Dog subclass that logs a different message to the console. This method overrides the speak method in the Animal superclass.

Accessing Superclass Methods

When creating a subclass, you can also access methods from the superclass using the super keyword. Let’s modify the speak method in the Dog subclass to call the speak method in the Animal superclass.

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

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

In the example above, we have modified the speak method in the Dog subclass to call the speak method in the Animal superclass using the super keyword. This allows us to reuse the code from the superclass while still adding our own custom code.

Using `super` Keyword

The super keyword can also be used to call methods on the superclass that are not overridden in the subclass. Let’s add a new method called getAge to the Animal superclass, and call it from the Dog subclass using the super keyword.

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

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

  getAge() {
    console.log(`${this.name} is ${this.age} years old.`);
  }
}

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

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

  getAge() {
    super.getAge();
    console.log(`${this.name} is also ${this.age * 7} dog years old.`);
  }
}

In the example above, we have added a new getAge method to the Animal superclass that logs the age of the animal. We have also modified the getAge method in the Dog subclass to call the getAge method in the Animal superclass using the super keyword. This allows us to reuse the code from the superclass while still adding our own custom code.

Summary of `super` and `extends`

To summarize, the super keyword allows you to call methods on the superclass, and the extends keyword allows you to create a subclass that inherits from a superclass. You can override methods from the superclass in the subclass, and you can also access methods from the superclass using the super keyword.

Advantages of Using Class Inheritance

Using class inheritance in JavaScript can offer several advantages, including:

Code reuse: By creating a subclass that inherits from a superclass, you can reuse code and avoid code duplication.
Organization: Class inheritance can help you organize your code by grouping related functionality together.
Extensibility: Subclasses can be extended further, allowing for even more code reuse and organization.

Conclusion

Class inheritance is a powerful concept in JavaScript that allows you to create customized classes that inherit functionality from other classes. This can help you write cleaner, more organized code that is easier to maintain and extend. By using the extends keyword and the super keyword, you can create subclasses that inherit properties and methods from their superclasses, override methods in the subclass, and call methods on the superclass. Additionally, class inheritance can offer advantages such as code reuse, organization, and extensibility.

Thank You