Inheritance in JavaScript

Welcome back! Now that you have a solid understanding of classes and objects in JavaScript, it's time to delve deeper into inheritance. This is a natural progression in our journey into object-oriented programming (OOP) using JavaScript's unique syntax and features.

Inheritance in JavaScript allows you to create a new class that reuses the behavior of an existing class via prototypes. This facilitates code reuse, extends object functionalities, and creates easily manageable and understandable programs. Let's dive in!

In this lesson, you'll understand how to leverage inheritance in JavaScript. We'll cover:

1. What Inheritance Is in JavaScript
2. How to Implement Inheritance Using ES6 Classes
3. Benefits of Using Inheritance

You'll also learn about the prototype chain and how to manage inheritance using classes and constructors.

Inheritance in JavaScript is a mechanism to create a hierarchical class structure through a prototype chain, whereby one object inherits the properties and methods of another. To better understand this, we’ll use an example involving a Person class as the base class and a Student class as the derived class. This will help you see how properties and methods are inherited and extended in JavaScript.

Let’s start by defining a Person class using ES6 class syntax to act as the base class in our example:

// Define the base class Person with name and age properties
class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }

    // Method to display name and age
    display() {
        console.log(`Name: ${this.name}, Age: ${this.age}`);
    }
}

In this snippet, the Person class is defined with attributes name and age. The constructor initializes these attributes, and a display method is used to print the details.

Now, we’ll create a Student class that extends the Person class:

// Define the derived class Student, extending from Person
class Student extends Person {
    constructor(name, age, major) {
        super(name, age);
        this.major = major;
    }

    // Method to display major of the student
    displayMajor() {
        console.log(`Major: ${this.major}`);
    }
}

In the Student class, we use the extends keyword to inherit from Person. The constructor uses the super function to call the base class constructor, initializing the inherited properties. The Student class adds a new attribute major and a displayMajor method specific to its class.