JavaScript Class Inheritance

Class inheritance in JavaScript allows one class to inherit properties and methods from another class. This enables code reusability and a structured approach to object-oriented programming.

🔹 How to Inherit a Class? (`extends`)

The extends keyword is used to create a child class that inherits from a parent class.

✅ Basic Example of Inheritance

class Animal {
    constructor(name) {
        this.name = name;
    }

    makeSound() {
        console.log("Some generic animal sound");
    }
}

class Dog extends Animal {
    bark() {
        console.log("Woof! Woof!");
    }
}

const myDog = new Dog("Buddy");
console.log(myDog.name);  // ✅ Output: Buddy (inherited from Animal)
myDog.makeSound();        // ✅ Output: Some generic animal sound (inherited)
myDog.bark();             // ✅ Output: Woof! Woof! (defined in Dog)

✔ The Dog class inherits the name property and makeSound() method from Animal.
✔ The bark() method is unique to Dog.

🔹 Calling Parent Class Constructor (`super`)

If a child class has its own constructor, it must call super() to invoke the parent class constructor.

✅ Example: Using `super()`

class Animal {
    constructor(name) {
        this.name = name;
    }
}

class Dog extends Animal {
    constructor(name, breed) {
        super(name); // Calls the parent constructor
        this.breed = breed;
    }

    info() {
        console.log(`${this.name} is a ${this.breed}`);
    }
}

const dog1 = new Dog("Max", "Labrador");
dog1.info(); // ✅ Output: Max is a Labrador

✔ super(name) ensures name is initialized from the Animal class.
✔ The Dog class adds a new property breed.

🔹 Overriding Methods

A child class can override a parent method by defining the same method name.

✅ Example: Overriding a Method

class Animal {
    makeSound() {
        console.log("Some generic animal sound");
    }
}

class Dog extends Animal {
    makeSound() {
        console.log("Woof! Woof!");
    }
}

const dog = new Dog();
dog.makeSound(); // ✅ Output: Woof! Woof! (overridden method)

✔ The Dog class overrides the makeSound() method from Animal.

🔹 Calling Parent Methods Using `super`

You can still call a parent method inside an overridden method using super.methodName().

✅ Example: Using `super.methodName()`

class Animal {
    makeSound() {
        console.log("Some generic animal sound");
    }
}

class Dog extends Animal {
    makeSound() {
        super.makeSound(); // Calls the parent method
        console.log("Woof! Woof!"); // Adds new behavior
    }
}

const myDog = new Dog();
myDog.makeSound();  
// ✅ Output:
// Some generic animal sound
// Woof! Woof!

✔ super.makeSound() calls the original method from the parent class.
✔ The child class extends the behavior rather than replacing it.

🔹 Static Methods & Inheritance

Static methods belong to the class itself, not instances. They are inherited by child classes.

✅ Example: Static Methods in Inheritance

class Animal {
    static generalInfo() {
        console.log("Animals are living beings.");
    }
}

class Dog extends Animal {}

Dog.generalInfo(); // ✅ Output: Animals are living beings.

✔ Dog inherits the generalInfo() method from Animal.

🎯 Summary

✔ Use extends to create a child class.
✔ Use super() in the constructor to call the parent class constructor.
✔ Methods can be overridden in child classes.
✔ Use super.methodName() to call the parent method inside an overridden method.
✔ Static methods are inherited by child classes.

🚀 Want more examples? Let me know! 😊

Souy Soeng

JavaScript Class Inheritance