JavaScript Class Inheritance

JavaScript Class Inheritance

JavaScript Class Inheritance is a powerful concept that allows developers to create new classes based on existing ones. This promotes code reusability, organization, and simplification of complex code structures. In this article, we’ll explore the syntax of class inheritance, how to access properties and methods from parent classes, how to override methods, and provide a hands-on example to cement your understanding. By the end of this article, you’ll have a solid grasp of how class inheritance works in JavaScript.

1. Syntax

The syntax for creating a class in JavaScript is straightforward. You can define a class using the class keyword, followed by the class name and a set of curly braces. To implement inheritance, you use the extends keyword.

class ParentClass {
    constructor(name) {
        this.name = name;
    }
}
class ChildClass extends ParentClass {
    constructor(name, age) {
        super(name); // Calling the constructor of the parent class
        this.age = age;
    }
}
    

2. Accessing Parent Properties

When a child class is created from a parent class, it can access the parent class’s properties. To access these properties, you can refer to them directly by using the this keyword.

class Animal {
    constructor(name) {
        this.name = name;
    }
}
class Dog extends Animal {
    bark() {
        console.log(this.name + " barks!");
    }
}
const dog = new Dog("Fido");
console.log(dog.name); // Outputs: Fido
dog.bark(); // Outputs: Fido barks!
    

3. Accessing Parent Methods

Just like properties, child classes can also access methods defined in the parent class. This is done through the this keyword as well.

class Vehicle {
    start() {
        console.log("Vehicle started.");
    }
}
class Car extends Vehicle {
    start() {
        super.start(); // Calling the start method from Vehicle
        console.log("Car started.");
    }
}
const car = new Car();
car.start();
// Outputs:
// Vehicle started.
// Car started.
    

4. Overriding Methods

Child classes can also override methods defined in the parent class. This means that they can provide their own implementation of a method already defined in the parent class.

class Bird {
    fly() {
        console.log("Bird is flying.");
    }
}
class Penguin extends Bird {
    fly() {
        console.log("Penguins cannot fly.");
    }
}
const penguin = new Penguin();
penguin.fly(); // Outputs: Penguins cannot fly.
    

5. Example: Inheriting from a Parent Class

Let’s create an example that combines all the concepts discussed. We’ll create a base class called Person, and a derived class called Student that inherits from it.

class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
    describe() {
        return `${this.name} is ${this.age} years old.`;
    }
}
class Student extends Person {
    constructor(name, age, grade) {
        super(name, age);
        this.grade = grade;
    }
    describe() {
        return `${super.describe()} They are in grade ${this.grade}.`;
    }
}
const student = new Student("Alice", 20, "Junior");
console.log(student.describe());
// Outputs: Alice is 20 years old. They are in grade Junior.
    

6. Conclusion

In JavaScript, class inheritance is a critical feature that promotes better code organization and reuse. By allowing classes to inherit properties and methods from other classes, developers can leverage existing code and extend functionality as needed. As we have seen with practical examples, understanding and utilizing class inheritance helps in crafting cleaner, more efficient code in your JavaScript applications.

FAQ