ReviseAlgo Logo

OOP in JavaScript

Inheritance — extends & super

Master Class Inheritance in JavaScript. Learn extends, super execution timing, method overriding, and prototype chains.

Last Updated: July 15, 2026 • 10 min read

1. Introduction

In Object-Oriented Programming, classes can inherit properties and methods from other classes. JavaScript manages class inheritance using the extends keyword to declare a subclass, and the super keyword to call parent constructors and methods.

2. Why It Matters

Inheritance allows you to reuse code by sharing common behaviors across subclasses. Understanding the execution order of the super() call is key to initializing subclass properties correctly.

3. Real-World Analogy

Think of Inheriting Property from a Parent:

  • extends (Family lines): A child inherits a house model from their parent. The child doesn't need to rebuild the rooms from scratch; they automatically inherit the layout.
  • super() call (Foundation inspection): Before the child can paint the walls (initialize child properties using this), they must call a contractor to inspect the parent foundation (call super()). If they paint the walls first without inspecting the foundation, the construction inspector throws an error.
  • Method Overriding (Remodeling rooms): The parent house has a kitchen layout (parent method). The child wants to remodel the kitchen (override method). They can replace the kitchen completely, or use the parent layout and add accessories (calling super.cook() inside the overridden method).

4. Class Inheritance Syntax

A subclass is declared using the extends keyword. If the subclass defines a constructor, it must call super() before accessing the this context:

5. Prototype Chains in Inheritance

When you declare a subclass using extends, the engine sets up prototype links in two directions:
1. Instance Prototype Chain: Links the subclass prototype to the parent prototype: Object.getPrototypeOf(Dog.prototype) === Animal.prototype. This allows instances to inherit parent methods.
2. Constructor Prototype Chain: Links the subclass constructor to the parent constructor: Object.getPrototypeOf(Dog) === Animal. This allows the subclass to inherit parent static methods.

6. Practical Example

This script demonstrates subclass inheritance inheriting static methods automatically:

7. Common Mistakes

  • Accessing this before calling super(): Inside a subclass constructor, the this context is uninitialized. Attempting to read or write to this.prop before calling super() throws a ReferenceError.

8. Quick Quiz

Q1: What happens if you attempt to use the 'this' keyword inside a subclass constructor before calling super()?

A) It fails silently, setting properties on the global object

B) It throws a ReferenceError immediately

Answer: B — Inside a subclass constructor, you must call super() before accessing this, otherwise a ReferenceError is thrown.

9. Scenario-Based Challenge

The Encapsulated Logger Middleware:

You want to write a custom Express middleware logger subclass: ServerLogger that inherits from BaseLogger. The parent constructor initializes a channelName property. The subclass constructor must receive an additional port setting, calling the parent constructor first. Write this class definition.

10. Debugging Exercise

Explain why this constructor definition throws an error, and how to fix it:

class Base {
  constructor(id) { this.id = id; }
}

class Extended extends Base {
  constructor(id, details) {
    // Bug: assigning subclass property before calling super constructor!
    this.details = details; 
    super(id);
  }
}
const ext = new Extended(10, 'Config'); // ReferenceError! Why?
View Solution

Diagnosis: Inside a subclass constructor, the this context is uninitialized. Attempting to assign properties to this before calling super() throws a ReferenceError.

Fix: Call super() before assigning properties to the this context:

class Extended extends Base {
  constructor(id, details) {
    super(id); // Call parent constructor first!
    this.details = details; // Safe assignment
  }
}

11. Interview Questions

🟢 Q1: Explain how extends sets up prototype inheritance chains in JavaScript classes.

Answer: The extends keyword sets up prototype links in two directions:
1. Instance Link: Links the prototype of the subclass to the prototype of the parent class:
Dog.prototype.__proto__ = Animal.prototype.
This allows instances of Dog to inherit methods from Animal.prototype.
2. Static Link: Links the subclass constructor function itself to the parent constructor function:
Dog.__proto__ = Animal.
This allows the subclass to inherit static methods from the parent class.

12. Production Considerations

  • • Favor Composition: Deep class inheritance chains (e.g. A extends B extends C extends D) can make code rigid and difficult to modify. In production environments, favor composition over deep inheritance chains where possible.