JavaScript Class Inheritance: Master Inheritance Easily!

Lenovo (Renewed) Thinkcentre M700 Desktop Mini Pc (Intel Core I3 …

The Intel core i3 6100T 3.2 GHz processor along with 3 MB Cache and integrated Intel graphics provide fast processing, m…
6 Month Extendable Pan India Warranty. Experience hassle free ownership, with out Pan India comprehensive warranty cover…
It comes preinstalled with Windows 11 and MS Office.

₹6,690

Buy on Amazon

Inheritance is a fundamental concept in programming, allowing objects to acquire properties and methods from other objects. In JavaScript, class inheritance simplifies this process, making it easier for developers to create hierarchies and reuse code effectively. This guide will walk you through the concept of JavaScript class inheritance, covering everything you need to know to master it quickly!

What Is Class Inheritance in JavaScript?

Class inheritance in JavaScript allows a class (often called a child or subclass) to inherit properties and methods from another class (the parent or superclass). This provides a clear structure to code and reduces redundancy by enabling the child class to reuse code defined in the parent class.

Imagine you’re building a system with different types of vehicles. Instead of redefining shared properties (like speed, color) for each vehicle type, you can create a generic Vehicle class and have specific vehicle classes inherit from it.

Defining a Basic Class in JavaScript

Let’s start with the basics. Here’s how you define a simple class in JavaScript:

class Vehicle {
  constructor(brand, speed) {
    this.brand = brand;
    this.speed = speed;
  }

  describe() {
    return `${this.brand} moves at ${this.speed} km/h.`;
  }
}

In this example, Vehicle is a class with two properties (brand and speed) and a method (describe) that returns a description of the vehicle.

How to Implement Class Inheritance

Now, let’s create a specific class, like Car, that inherits properties and methods from the Vehicle class.

class Car extends Vehicle {
  constructor(brand, speed, fuelType) {
    // Use `super` to call the parent class's constructor
    super(brand, speed);
    this.fuelType = fuelType;
  }

  // Define an additional method specific to Car
  fuelEfficiency() {
    return `${this.brand} runs on ${this.fuelType}.`;
  }
}

In the example above, Car extends Vehicle by adding a new property, fuelType, and a method called fuelEfficiency. The super keyword calls the constructor of the Vehicle class, ensuring that Car inherits brand and speed properties.

Example: Using Inherited Properties and Methods

Let’s put these classes to work by creating an instance of Car.

const myCar = new Car('Toyota', 120, 'Petrol');
console.log(myCar.describe());         // Toyota moves at 120 km/h.
console.log(myCar.fuelEfficiency());   // Toyota runs on Petrol.

With inheritance, myCar has access to both the describe method from the Vehicle class and the fuelEfficiency method from the Car class.

Why Use Class Inheritance?

Class inheritance can make your code more readable, organized, and reusable. Here are some reasons why developers use inheritance in JavaScript:

Code Reusability: Avoid repeating code by using shared properties and methods in a base class.
Scalability: Easily add new features to subclasses without modifying the parent class.
Maintainability: By centralizing code in parent classes, it’s easier to manage and debug.

Overriding Parent Methods in JavaScript

Sometimes, a subclass may need to implement a method differently than its parent class. In JavaScript, you can override a method in the child class by defining it with the same name.

For instance, let’s say a Bike class inherits from Vehicle but has a custom description:

class Bike extends Vehicle {
  describe() {
    return `${this.brand} is a bike that goes ${this.speed} km/h.`;
  }
}

By overriding the describe method, the Bike class provides a customized message for bike instances.

Real-World Example: Building a Transportation System

Let’s expand our example to see how JavaScript class inheritance can be used to build a more complex system:

class Truck extends Vehicle {
  constructor(brand, speed, loadCapacity) {
    super(brand, speed);
    this.loadCapacity = loadCapacity;
  }

  describe() {
    return `${this.brand} truck carries ${this.loadCapacity} tons and moves at ${this.speed} km/h.`;
  }
}

const myTruck = new Truck('Volvo', 80, 10);
console.log(myTruck.describe()); // Volvo truck carries 10 tons and moves at 80 km/h.

Here, Truck inherits from Vehicle but adds a unique property, loadCapacity, and customizes the describe method to suit the specifics of a truck.

Key Points to Remember

Inheritance Structure: Use the extends keyword to create a subclass.
Calling Parent Constructor: Use super() to invoke the parent class’s constructor.
Method Overriding: Define methods in the child class with the same name to override parent methods.
Reusable Code: Define common properties in the parent class to avoid redundancy.

Frequently Asked Questions

Q1: Can multiple classes inherit from the same parent class?
Yes, multiple classes can inherit from a single parent class. Each subclass will have access to the parent’s properties and methods.

Q2: Can a subclass have its own properties?
Absolutely! A subclass can define its own unique properties and methods, which can exist alongside the inherited properties.

Q3: What if a subclass doesn’t need a constructor?
If a subclass doesn’t need additional properties, you can omit the constructor. In such cases, JavaScript will automatically call the parent’s constructor when an instance is created.

Conclusion

JavaScript class inheritance offers a powerful way to manage code efficiently by enabling code reusability and scalability. Whether you’re developing a simple program or a large application, understanding inheritance will make your code more organized and manageable.

Class inheritance might seem complex at first, but with practice, you’ll be able to implement it with ease. Try experimenting with the examples here to get a hands-on understanding, and soon you’ll master the art of JavaScript class inheritance!

Bestseller #1