How To Inherit From A Class In Javascript

In JavaScript, one of the fundamental concepts is inheritance. Inheritance allows you to create a new class based on an existing class, also known as a superclass. This technique is widely used in object-oriented programming to enhance code reusability and organization. In this article, we will delve into how to inherit from a class in JavaScript to help you better understand and utilize this powerful feature.

To inherit from a class in JavaScript, you can use the `extends` keyword. The `extends` keyword establishes a relationship between two classes: a subclass (the new class you are creating) and a superclass (the existing class you want to inherit from). Here's a simple example to illustrate this concept:

class Animal {
  constructor(name) {
    this.name = name;
  }
  
  speak() {
    console.log(`${this.name} makes a sound`);
  }
}

class Dog extends Animal {
  speak() {
    console.log(`${this.name} barks`);
  }
}

const myDog = new Dog('Buddy');
myDog.speak(); // Output: Buddy barks

In the example above, the `Dog` class extends the `Animal` class using the `extends` keyword. This means that the `Dog` class inherits all the properties and methods from the `Animal` class. You can override methods in the subclass to provide different behavior, as shown in the `speak` method of the `Dog` class.

It's important to note that when you extend a class in JavaScript, the subclass constructor must call `super()` before using `this`. The `super()` method calls the superclass constructor, allowing you to initialize the properties defined in the superclass.

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

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

const myDog = new Dog('Buddy', 'Golden Retriever');
console.log(myDog); // Output: Dog { name: 'Buddy', breed: 'Golden Retriever' }

In the updated example, the `Dog` subclass has its constructor that calls `super(name)` to initialize the `name` property inherited from the `Animal` superclass. This allows you to set additional properties specific to the `Dog` class.

Additionally, you can access superclass methods from the subclass by using the `super` keyword. This is useful when you want to extend the behavior of a superclass method in the subclass while still retaining the original functionality.

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

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

const myDog = new Dog();
myDog.speak(); // Output: Animal makes a sound Dog barks

By calling `super.speak()`, the `Dog` class invokes the `speak` method of the superclass `Animal` before adding its own behavior.

In conclusion, inheritance in JavaScript using the `extends` keyword is a powerful mechanism for creating a hierarchy of classes and promoting code reuse. Understanding how to inherit from a class enables you to write more maintainable and structured code. I hope this article has shed light on the concept of inheritance in JavaScript and how you can leverage it in your coding projects.