A Deep Dive into JavaScript Classes: Class Inheritance

In the previous blog post, we discussed the fundamentals of classes in JavaScript. In this post, we'll explore class inheritance, a powerful feature that enhances code reusability, readability, maintainability, and debugging efficiency. In programming, inheritance refers to passing down characteristics from a parent to a child so that a new piece of code can reuse and build upon the features of an existing one. MDN When creating a new class based on an existing class, we use the keyword entends. Syntax class childClass extends parentClass Let's take a look at an example from The Modern JavaScript Tutorial class Animal { constructor(name) { this.speed = 0; this.name = name; } run(speed) { this.speed = speed; console.log(`${this.name} runs with speed ${this.speed}.`); } } class Rabbit extends Animal { hide() { console.log(`${this.name} hides!`); } } let rabbit = new Rabbit("White Rabbit"); rabbit.run(5); // White Rabbit runs with speed 5. rabbit.hide(); // White Rabbit hides! Understanding Prototypes As discussed in past blogs, JavaScript uses objects or prototypes to reference properties. If an object doesn't have a property, it searches up the prototype chain until it finds the property or reaches null (the end of the chain). By using entends, we set the prototype of the child class to the parent class. In the example above, the child class Rabbit can inherit and use the method, run() from the parent class Animal. super for Constructors When calling a function with the new keyword, an empty object is created and assigned to this. This object is returned implicitly unless another object is explicitly returned. function User(name) { // this = {}; (implicitly) // add properties to this this.name = name; this.isAdmin = false; // return this; (implicitly) } (Discussed more about it here in this blog) In the example above, the child class does not have its constructor. To add a constructor to the child class, you must call super() before using this. This ensures that the parent class's constructor is executed, setting up the necessary context for this. class Animal { constructor(name) { this.speed = 0; this.name = name; } } class Rabbit extends Animal { constructor(name, earLength) { super(name); this.earLength = earLength; } } let rabbit = new Rabbit("White Rabbit", 10); console.log(rabbit.name); // White Rabbit console.log(rabbit.earLength); // 10 super for Methods In the child class, you can call methods from the parent class using super.methodName(). This allows you to modify or extend the functionality of the parent method rather than simply overwriting it. [[HomeObject]] The [[HomeObejct]] ensures that super works correctly. It is an internal property in JavaScript that links a method to the object or class where it was originally defined. class Parent { sayHi() { return "Hi from Parent"; } } class Child extends Parent { sayHi() { const parentMessage = super.sayHi(); console.log(`${parentMessage} in the Child class.`); } } const child = new Child(); child.sayHi(); // Hi from Parent in the Child class. Class inheritance in JavaScript is a powerful feature that simplifies code reusability and structure. Understanding this concept is essential for mastering object-oriented programming. By leveraging inheritance, developers can create clean, efficient, and maintainable codebases while reducing redundancy.

Mar 26, 2025 - 18:09

A Deep Dive into JavaScript Classes: Class Inheritance

In the previous blog post, we discussed the fundamentals of classes in JavaScript. In this post, we'll explore class inheritance, a powerful feature that enhances code reusability, readability, maintainability, and debugging efficiency.

In programming, inheritance refers to passing down characteristics from a parent to a child so that a new piece of code can reuse and build upon the features of an existing one.
MDN

When creating a new class based on an existing class, we use the keyword entends.

Syntax

class childClass extends parentClass

Let's take a look at an example from The Modern JavaScript Tutorial

class Animal { 
    constructor(name) { 
        this.speed = 0; 
        this.name = name; 
    }
    run(speed) { 
        this.speed = speed; 
        console.log(`${this.name} runs with speed ${this.speed}.`); 
    } 
} 

class Rabbit extends Animal { 
    hide() { 
        console.log(`${this.name} hides!`); 
    } 
} 

let rabbit = new Rabbit("White Rabbit"); 
rabbit.run(5); // White Rabbit runs with speed 5. 
rabbit.hide(); // White Rabbit hides!

Understanding Prototypes
As discussed in past blogs, JavaScript uses objects or prototypes to reference properties. If an object doesn't have a property, it searches up the prototype chain until it finds the property or reaches null (the end of the chain).
By using entends, we set the prototype of the child class to the parent class. In the example above, the child class Rabbit can inherit and use the method, run() from the parent class Animal.

super for Constructors
When calling a function with the new keyword, an empty object is created and assigned to this. This object is returned implicitly unless another object is explicitly returned.

function User(name) {   
    // this = {};  (implicitly) 

    // add properties to this 
    this.name = name; 
    this.isAdmin = false;   

    // return this;  (implicitly) 
}

(Discussed more about it here in this blog)

In the example above, the child class does not have its constructor. To add a constructor to the child class, you must call super() before using this. This ensures that the parent class's constructor is executed, setting up the necessary context for this.

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

class Rabbit extends Animal { 
    constructor(name, earLength) {     
        super(name); 
        this.earLength = earLength; 
    } 
} 

let rabbit = new Rabbit("White Rabbit", 10);
console.log(rabbit.name); // White Rabbit
console.log(rabbit.earLength); // 10

super for Methods
In the child class, you can call methods from the parent class using super.methodName(). This allows you to modify or extend the functionality of the parent method rather than simply overwriting it.

[[HomeObject]]
The [[HomeObejct]] ensures that super works correctly. It is an internal property in JavaScript that links a method to the object or class where it was originally defined.

class Parent {
    sayHi() {
        return "Hi from Parent";
    }
}

class Child extends Parent {
    sayHi() {
        const parentMessage = super.sayHi();
        console.log(`${parentMessage} in the Child class.`);
    }
}

const child = new Child();
child.sayHi(); // Hi from Parent in the Child class.

Class inheritance in JavaScript is a powerful feature that simplifies code reusability and structure. Understanding this concept is essential for mastering object-oriented programming. By leveraging inheritance, developers can create clean, efficient, and maintainable codebases while reducing redundancy.