Concepts of Inheritance in JavaScript: Understanding Code Reuse and Class Relationships

7.1 Concepts of Inheritance

In the world of programming, one of the most powerful concepts that object-oriented programming (OOP) offers is inheritance. Inheritance allows us to create a new class that is based on an existing class. This new class, known as a child class or subclass, inherits properties and methods from the existing class, which is referred to as the parent class or superclass. This mechanism not only promotes code reuse but also helps in establishing a natural hierarchy between classes, making the code more organized and easier to maintain.

Understanding Inheritance

What is Inheritance?

Inheritance is a fundamental concept in OOP that enables a new class to inherit the properties and methods of an existing class. This means that the child class can use the functionality of the parent class without having to rewrite the code. It allows developers to create a hierarchy of classes that share a common structure and behavior.

For instance, consider a real-world analogy where we have a general category called “Vehicle.” This category can have specific types like “Car” and “Truck.” Both “Car” and “Truck” share common characteristics of a “Vehicle,” such as having wheels and the ability to move. However, they also have their unique features. In programming terms, “Vehicle” would be the superclass, and “Car” and “Truck” would be subclasses.

Purpose of Inheritance

The primary purpose of inheritance is to promote code reuse. By inheriting from a parent class, a child class can avoid duplicating code that is common across multiple classes. This not only reduces the amount of code but also minimizes the chances of errors and inconsistencies. Additionally, inheritance helps in creating a logical structure for the code, making it easier to understand and maintain.

Key Terms in Inheritance

• Superclass (Parent Class): The class whose properties and methods are inherited by another class. It represents a general concept or category.
• Subclass (Child Class): The class that inherits properties and methods from the superclass. It represents a more specific concept or category.
• Inheritance Hierarchy: The relationship between classes where subclasses inherit from superclasses, forming a tree-like structure.

Real-World Analogy

To better understand inheritance, let’s consider the analogy of a “Vehicle” superclass with “Car” and “Truck” subclasses:

• Vehicle (Superclass): This class includes properties like numberOfWheels, engineType, and methods like startEngine() and stopEngine().
• Car (Subclass): Inherits all properties and methods from “Vehicle” and adds specific properties like numberOfDoors and methods like openTrunk().
• Truck (Subclass): Also inherits from “Vehicle” and adds properties like cargoCapacity and methods like loadCargo().

This hierarchy allows us to define common functionality in the “Vehicle” class, which can be reused by both “Car” and “Truck” classes, while still allowing each subclass to have its unique features.

Inheritance in JavaScript

JavaScript, being a versatile language, supports inheritance through both prototype-based and class-based approaches. Let’s explore both methods.

Prototype-Based Inheritance

JavaScript is a prototype-based language, meaning that inheritance is achieved through prototypes. Every JavaScript object has a prototype, which is another object from which it inherits properties and methods.

Here’s a basic example of prototype-based inheritance:

// Define a Vehicle constructor function
function Vehicle(type) {
  this.type = type;
}

// Add a method to the Vehicle prototype
Vehicle.prototype.startEngine = function() {
  console.log(`Starting the engine of the ${this.type}`);
};

// Define a Car constructor function
function Car(brand) {
  Vehicle.call(this, 'Car'); // Call the Vehicle constructor
  this.brand = brand;
}

// Set the prototype of Car to be an instance of Vehicle
Car.prototype = Object.create(Vehicle.prototype);

// Add a method specific to Car
Car.prototype.openTrunk = function() {
  console.log(`Opening the trunk of the ${this.brand} car`);
};

// Create an instance of Car
const myCar = new Car('Toyota');
myCar.startEngine(); // Output: Starting the engine of the Car
myCar.openTrunk();   // Output: Opening the trunk of the Toyota car

In this example, the Car constructor function inherits from the Vehicle constructor function. The Car prototype is set to an instance of Vehicle, allowing it to inherit the startEngine method.

Class-Based Inheritance (ES6)

With the introduction of ES6, JavaScript now supports class-based inheritance, which provides a more intuitive and cleaner syntax for defining classes and inheritance.

Here’s how you can achieve inheritance using ES6 classes:

// Define a Vehicle class
class Vehicle {
  constructor(type) {
    this.type = type;
  }

  startEngine() {
    console.log(`Starting the engine of the ${this.type}`);
  }
}

// Define a Car class that extends Vehicle
class Car extends Vehicle {
  constructor(brand) {
    super('Car'); // Call the parent class constructor
    this.brand = brand;
  }

  openTrunk() {
    console.log(`Opening the trunk of the ${this.brand} car`);
  }
}

// Create an instance of Car
const myCar = new Car('Toyota');
myCar.startEngine(); // Output: Starting the engine of the Car
myCar.openTrunk();   // Output: Opening the trunk of the Toyota car

In this example, the Car class extends the Vehicle class, inheriting its properties and methods. The super keyword is used to call the constructor of the parent class.

Benefits of Inheritance

• Code Reuse: Inheritance allows us to reuse code across multiple classes, reducing redundancy and improving maintainability.
• Logical Structure: It helps in organizing code into a logical hierarchy, making it easier to understand and manage.
• Extensibility: New functionality can be added to the existing codebase by creating new subclasses without modifying the existing classes.

Potential Drawbacks of Inheritance

• Tight Coupling: Inheritance can lead to tight coupling between classes, making it difficult to change one class without affecting others.
• Complexity: Deep inheritance hierarchies can become complex and difficult to manage, leading to increased maintenance overhead.
• Limited Flexibility: Inheritance is a rigid structure, and changes to the superclass can have unintended consequences on subclasses.

Visualizing Inheritance

To better understand how inheritance works, let’s visualize the relationship between the “Vehicle,” “Car,” and “Truck” classes using a class diagram.

    classDiagram
	    class Vehicle {
	        +String type
	        +startEngine()
	    }
	    class Car {
	        +String brand
	        +openTrunk()
	    }
	    class Truck {
	        +int cargoCapacity
	        +loadCargo()
	    }
	    Vehicle <|-- Car
	    Vehicle <|-- Truck

In this diagram, the Vehicle class is the superclass, and Car and Truck are subclasses that inherit from Vehicle.

Try It Yourself

To solidify your understanding of inheritance, try modifying the code examples above:

• Add a new subclass called Motorcycle that inherits from Vehicle and includes a method popWheelie().
• Experiment with adding new properties to the Vehicle class and observe how they are inherited by the subclasses.
• Create instances of Car, Truck, and Motorcycle and call their methods to see inheritance in action.

References and Further Reading

• MDN Web Docs: Inheritance
• W3Schools: JavaScript Inheritance

Knowledge Check

• What is the primary purpose of inheritance in OOP?
• How does prototype-based inheritance differ from class-based inheritance in JavaScript?
• What are some potential drawbacks of using inheritance?

Embrace the Journey

Remember, inheritance is a powerful tool in your programming toolkit, but like any tool, it should be used wisely. As you continue your journey in learning JavaScript, keep experimenting and exploring different ways to organize and structure your code. Inheritance is just one of the many concepts that will help you write more efficient and maintainable code. Stay curious, and enjoy the journey!

Quiz Time!