Inheritance in JavaScript Classes

Hello again! In this part of our JavaScript Class Basics Revision, we delve into inheritance in object-oriented programming (OOP) with JavaScript. Inheritance allows us to share code across classes, thus improving readability and efficiency.

In this lesson, we'll clarify attribute and method inheritance in JavaScript using practical examples. Our lesson's blueprint includes defining inheritance, examining attribute inheritance, exploring method inheritance, and decoding the super() function in JavaScript. Ready? Let's get started!

Inheritance involves creating a child class that inherits details from a parent class. In JavaScript, we often find scenarios where classes share common attributes or methods, which makes inheritance highly useful.

The extends keyword is used to set up inheritance, allowing one class to inherit properties and methods from another class. Here's an example featuring a parent class named Vehicle and a child class named Car:

// Define the parent class 'Vehicle'
class Vehicle {
    // Initialize the Vehicle with color and brand attributes
    constructor(color, brand) {
        this.color = color;
        this.brand = brand;
    }
}

// Define the child class 'Car', inheriting from 'Vehicle'
class Car extends Vehicle {
    constructor(color, brand, doors) {
        // Call the parent class's constructor method to set color and brand
        super(color, brand);
        this.doors = doors;
    }
}

In the Car class, the super() function inside its constructor calls the Vehicle class's constructor, enabling the inherited properties to be initialized correctly. The extends keyword signifies that Car is a subclass of Vehicle.

Inheritance types, such as Single, Multiple, Multilevel, and Hierarchical, in JavaScript cater to different needs. However, our focus in this lesson is primarily on single inheritance, where one parent class feeds one child class.

Attribute inheritance allows a child class to inherit the attributes of a parent class, with the exception of private fields. Private fields (declared with a # before the attribute name) are not accessible in child classes.

Consider this example featuring a parent class named Artist, and a child class named Musician:

class Artist {
    constructor(name) {
        this.name = name; // Parent's attribute
    }
}

class Musician extends Artist {
    constructor(name, instrument) {
        super(name); // Inheriting parent's attribute
        this.instrument = instrument; // Child's own attribute
    }
}

const john = new Musician('John Lennon', 'Guitar'); // Creating a Musician instance
console.log(john.name); // Output: John Lennon
console.log(john.instrument); // Output: Guitar

However, if the name attribute in the Artist class were private, it wouldn't be accessible in the Musician class:

class Artist {
    #name; // Private attribute

    constructor(name) {
        this.#name = name; // Initialize private attribute
    }

    getName() {
        return this.#name; // Getter method for the private attribute
    }
}

class Musician extends Artist {
    constructor(name, instrument) {
        super(name);
        this.instrument = instrument;
    }
}

const john = new Musician('John Lennon', 'Guitar');
console.log(john.getName()); // Output: John Lennon
console.log(john.instrument); // Output: Guitar

The Musician class inherits the name attribute from the Artist class and also has its own unique attribute, instrument, but it accesses the name attribute via a getter method since name is private.