Inheritance in JavaScript: How to Extend and Reuse Class Functionality

Inheritance is one of the core concepts of Object-Oriented Programming (OOP). It allows us to create a new class based on an existing class, which helps in reusing code and building relationships between different classes. In this guide, we'll explore how inheritance works in JavaScript, using simple language and examples to make it easy for everyone to understand.

What is Inheritance?

Inheritance allows one class, known as the child or subclass, to inherit properties and methods from another class, known as the parent or superclass. This means that the child class can use the features of the parent class and can also add or override features of its own.

Example of Inheritance

Let's start with a basic example where we have a parent class Animal and a child class Dog that inherits from it:

// Parent class
class Animal {
  constructor(name) {
    this.name = name;
  }
 
  // Method in the parent class
  speak() {
    console.log(`${this.name} makes a sound.`);
  }
}
 
// Child class that inherits from Animal
class Dog extends Animal {
  constructor(name, breed) {
    // Call the parent class constructor
    super(name);
    this.breed = breed;
  }
 
  // Method in the child class
  speak() {
    console.log(`${this.name}, the ${this.breed}, barks.`);
  }
}
 
// Create an instance of Dog
const myDog = new Dog('Buddy', 'Golden Retriever');
 
// Call the speak method
myDog.speak(); // Output: "Buddy, the Golden Retriever, barks."

In this example:

Animal is the parent class with a name property and a speak method.
Dog is the child class that inherits from Animal. It adds a new property breed and changes the speak method to be specific to dogs.
The super(name) call in the Dog constructor is used to call the constructor of the parent class (Animal) and set the name property.

Key Concepts in Inheritance

Understanding how inheritance works involves grasping a few key concepts:

1. extends Keyword
- The extends keyword is used to create a child class that inherits from a parent class. It establishes a relationship where the child class can access the properties and methods of the parent class.
2. super Keyword
- The super keyword is used inside the child class to call the constructor or methods of the parent class. It is essential to use super before accessing this in the child class’s constructor.
3. Method Overriding
- Method overriding allows a child class to provide its own implementation of a method that it inherits from the parent class. This is useful when the child class needs to behave differently than the parent class.

Why Use Inheritance?

Inheritance is a powerful feature that offers several benefits:

Code Reusability: Instead of writing the same code in multiple places, you can define common functionality in a parent class and let child classes inherit it.
Hierarchical Relationships: Inheritance helps you model real-world relationships, where a child class represents a more specific type of the parent class.
Organized Code: By grouping related features in parent and child classes, your code becomes more organized and easier to maintain.

Another Example: Vehicles and Cars

To further understand inheritance, let's look at an example involving vehicles and cars:

// Parent class
class Vehicle {
  constructor(type, speed) {
    this.type = type;
    this.speed = speed;
  }
 
  // Method in the parent class
  move() {
    console.log(`The ${this.type} is moving at ${this.speed} km/h.`);
  }
}
 
// Child class that inherits from Vehicle
class Car extends Vehicle {
  constructor(type, speed, brand) {
    // Call the parent class constructor
    super(type, speed);
    this.brand = brand;
  }
 
  // Method in the child class
  move() {
    console.log(`The ${this.brand} ${this.type} is moving at ${this.speed} km/h.`);
  }
}
 
// Create an instance of Car
const myCar = new Car('car', 100, 'Toyota');
 
// Call the move method
myCar.move(); // Output: "The Toyota car is moving at 100 km/h."

In this example:

The Vehicle class is the parent class with type and speed properties and a move method.
The Car class is the child class that adds a brand property and overrides the move method to include the brand in the output.

Conclusion

Inheritance in JavaScript is a useful tool for building organized and efficient code. It allows classes to share common functionality, making your code easier to maintain and extend. By understanding and using inheritance, you can write cleaner, more effective JavaScript code.

With these basics of inheritance, you’re now ready to explore more advanced concepts in JavaScript and Object-Oriented Programming. Happy coding!

Get And Set Abstraction