Can a class extend multiple classes?

No, JavaScript only supports single inheritance. A class can only extend one parent. For multiple behaviors, use mixins (functions that add methods to a class) or composition patterns.

What happens if I forget super() in a subclass constructor?

You get a ReferenceError. If your subclass has a constructor, you MUST call super() before accessing 'this'. If you don't define a constructor, one is implicitly created that calls super(...args).

Are static methods inherited?

Yes! If class Dog extends Animal, then static methods on Animal are accessible via Dog. Dog.staticMethod() works if Animal has that static method. The static side has its own prototype chain.

When should I use inheritance vs composition?

Use inheritance for clear 'is-a' relationships (Dog is an Animal) with shared interfaces. Use composition when combining behaviors from multiple sources, when the hierarchy would be deep/complex, or when you need more flexibility to change behavior at runtime.

JavaScript Inheritance

Sharing behavior between classes. Parent to child relationships.

Module 5 · Advanced Concepts

Beyond the basics lie the tools professional JavaScript relies on daily: Promises for async work, classes for object-oriented design, Map and Set for specialized collections, and structured error handling for reliable applications.

Learn Inheritance in JavaScript — covering extends, super(), Method Overriding, Multilevel Inheritance with interactive visual examples and step-by-step explanations.

About this module

Once you are comfortable with functions and data structures, the next step is the patterns professional codebases use every day. Promises coordinate asynchronous work, classes organize related behavior, and try/catch keeps applications from crashing on unexpected input.

This module bridges beginner syntax and production-ready JavaScript. You will learn when to reach for Map instead of a plain object, how Set eliminates duplicates, and how error handling turns fragile scripts into reliable software.

Why this matters

Understanding inheritance is essential for every JavaScript developer. It shows up in frontend UI code, backend APIs, and framework internals — and getting it wrong leads to bugs that are hard to trace. This chapter builds intuition with visuals so the behavior sticks.

Key topics covered

extends
super()
Method Overriding
Multilevel Inheritance
Composition vs Inheritance

Where you'll use it

Building interactive web applications with inheritance
Processing and transforming data in frontend and backend code
Writing cleaner, more maintainable JavaScript modules
Debugging and reviewing code during development

extends

Creates a child class that inherits from a parent.

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

  speak() {
    return `${this.name} makes a noise.`;
  }
}

class Dog extends Animal {
  bark() {
    return `${this.name} barks!`;
  }
}

const rex = new Dog("Rex");
rex.speak(); // "Rex makes a noise." (inherited)
rex.bark();  // "Rex barks!" (own method)
rex instanceof Dog;    // true
rex instanceof Animal; // true

What extends does:

1. Sets Dog.prototype.__proto__ = Animal.prototype

2. Sets Dog.__proto__ = Animal (static inheritance)

3. Dog inherits all methods from Animal

super()

Calls the parent constructor or parent methods.

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

class Dog extends Animal {
  constructor(name, breed) {
    super(name, 4); // calls Animal's constructor
    this.breed = breed; // then set own props
  }
}

const rex = new Dog("Rex", "Labrador");
rex.name;  // "Rex" (from parent)
rex.legs;  // 4 (from parent)
rex.breed; // "Labrador" (own)

super() in constructor calls the parent constructor. Must be called BEFORE using 'this'.

💡 super() must come before this

1 / 2

Method Overriding

Replace or extend inherited behavior.

class Shape {
  area() {
    return 0;
  }

  describe() {
    return `Shape with area ${this.area()}`;
  }
}

class Circle extends Shape {
  constructor(radius) {
    super();
    this.radius = radius;
  }

  // Override: completely replace parent method
  area() {
    return Math.PI * this.radius ** 2;
  }
}

class Square extends Shape {
  constructor(side) {
    super();
    this.side = side;
  }

  area() {
    return this.side ** 2;
  }
}

const c = new Circle(5);
c.area();     // 78.54 (overridden)
c.describe(); // "Shape with area 78.54" (inherited, calls OUR area())

💡 When the parent calls this.area(), it uses the child's version if overridden. This is polymorphism.

Multilevel Inheritance

Chains of inheritance: grandparent → parent → child.

class LivingThing {
  isAlive() { return true; }
}

class Animal extends LivingThing {
  constructor(name) {
    super();
    this.name = name;
  }
  eat() { return `${this.name} eats`; }
}

class Dog extends Animal {
  bark() { return "Woof!"; }
}

const d = new Dog("Rex");
d.bark();    // "Woof!" (own)
d.eat();     // "Rex eats" (from Animal)
d.isAlive(); // true (from LivingThing)

d instanceof Dog;         // true
d instanceof Animal;      // true
d instanceof LivingThing; // true

⚠️ Deep hierarchies (4+ levels) become hard to maintain. Prefer composition for complex object structures.

Composition vs Inheritance

'Has-a' (composition) is often better than 'is-a' (inheritance).

// ✗ Inheritance approach (fragile):
// class FlyingSwimmingDog extends ??? 
// Can't inherit from multiple classes!

// ✓ Composition approach (flexible):
const canFly = (obj) => ({
  fly() { return `${obj.name} is flying`; }
});

const canSwim = (obj) => ({
  swim() { return `${obj.name} is swimming`; }
});

function createDuck(name) {
  const duck = { name };
  return Object.assign(duck, canFly(duck), canSwim(duck));
}

const donald = createDuck("Donald");
donald.fly();  // "Donald is flying"
donald.swim(); // "Donald is swimming"

Inheritance

• Single parent only
• Tight coupling
• Fragile hierarchies
• Good for "is-a" relationships

Composition

• Mix multiple behaviors
• Loose coupling
• Easy to change
• Good for "has-a" relationships

FAQ

Common questions about inheritance.

class Animal { constructor(name) { this.name = name; } speak() { return `${this.name} makes a noise.`; } } class Dog extends Animal { bark() { return `${this.name} barks!`; } } const rex = new Dog("Rex"); rex.speak(); // "Rex makes a noise." (inherited) rex.bark(); // "Rex barks!" (own method) rex instanceof Dog; // true rex instanceof Animal; // true

class Animal { constructor(name, legs) { this.name = name; this.legs = legs; } } class Dog extends Animal { constructor(name, breed) { super(name, 4); // calls Animal's constructor this.breed = breed; // then set own props } } const rex = new Dog("Rex", "Labrador"); rex.name; // "Rex" (from parent) rex.legs; // 4 (from parent) rex.breed; // "Labrador" (own)

class Shape { area() { return 0; } describe() { return `Shape with area ${this.area()}`; } } class Circle extends Shape { constructor(radius) { super(); this.radius = radius; } // Override: completely replace parent method area() { return Math.PI * this.radius ** 2; } } class Square extends Shape { constructor(side) { super(); this.side = side; } area() { return this.side ** 2; } } const c = new Circle(5); c.area(); // 78.54 (overridden) c.describe(); // "Shape with area 78.54" (inherited, calls OUR area())

class LivingThing { isAlive() { return true; } } class Animal extends LivingThing { constructor(name) { super(); this.name = name; } eat() { return `${this.name} eats`; } } class Dog extends Animal { bark() { return "Woof!"; } } const d = new Dog("Rex"); d.bark(); // "Woof!" (own) d.eat(); // "Rex eats" (from Animal) d.isAlive(); // true (from LivingThing) d instanceof Dog; // true d instanceof Animal; // true d instanceof LivingThing; // true

// ✗ Inheritance approach (fragile): // class FlyingSwimmingDog extends ??? // Can't inherit from multiple classes! // ✓ Composition approach (flexible): const canFly = (obj) => ({ fly() { return `${obj.name} is flying`; } }); const canSwim = (obj) => ({ swim() { return `${obj.name} is swimming`; } }); function createDuck(name) { const duck = { name }; return Object.assign(duck, canFly(duck), canSwim(duck)); } const donald = createDuck("Donald"); donald.fly(); // "Donald is flying" donald.swim(); // "Donald is swimming"

About this chapter

About this module

Why this matters

Key topics covered

Where you'll use it

extends

super()

Method Overriding

Multilevel Inheritance

Composition vs Inheritance

FAQ

About this chapter

About this module

Why this matters

Key topics covered

Where you'll use it

extends

super()

Method Overriding

Multilevel Inheritance

Composition vs Inheritance

FAQ