JavaScript Notes

JavaScript Inheritance – extends, super, and Prototype-Based Inheritance

Master JavaScript inheritance with ES6 extends, super keyword, method overriding, prototype chain, multi-level inheritance, and interview-ready Q&A examples.

Inheritance allows one class (child) to acquire the properties and methods of another class (parent), enabling code reuse and hierarchical relationships. In JavaScript, inheritance is prototype-based — extends sets up the prototype chain so that a child class can look up methods on its parent.

📊 Class Hierarchy Diagram

Example

┌──────────────────────────────┐ │ Animal (Parent) │ │ constructor(name) │ │ speak() → "makes a sound" │ │ toString() → "[Animal]" │ └──────────────┬───────────────┘ │ extends ┌────────────┴────────────┐ ▼ ▼ ┌─────────────────┐ ┌──────────────────┐ │ Dog (Child) │ │ Cat (Child) │ │ breed │ │ indoor │ │ speak() ──────►│ │ speak() ───────►│ │ "barks! 🐕" │ │ "meows! 🐱" │ └────────┬────────┘ └──────────────────┘ │ extends ▼ ┌──────────────────────────────┐ │ GuideDog (Grandchild) │ │ owner │ │ guide() → "guides owner" │ │ speak() → inherited (barks) │ └──────────────────────────────┘

💻 Example 1 — Basic Inheritance

Example

class Animal { constructor(name) { this.name = name; } speak() { return `${this.name} makes a sound.`; } toString() { return `[Animal: ${this.name}]`; } } class Dog extends Animal { constructor(name, breed) { super(name); // MUST call parent constructor first this.breed = breed; } speak() { // override parent method return `${this.name} barks! 🐕`; } fetch(item) { return `${this.name} fetches the ${item}!`; } } const dog = new Dog("Bruno", "Labrador"); console.log(dog.speak()); // overridden method console.log(dog.fetch("ball")); // own method console.log(dog.toString()); // inherited from Animal console.log(dog instanceof Dog); console.log(dog instanceof Animal);

Output

Bruno barks! 🐕
Bruno fetches the ball!
[Animal: Bruno]
true
true

💻 Example 2 — Calling Parent Methods with `super`

js example

class Vehicle {
  constructor(brand, year) {
    this.brand = brand;
    this.year  = year;
  }

  describe() {
    return `${this.year} ${this.brand}`;
  }
}

class Car extends Vehicle {
  constructor(brand, year, doors) {
    super(brand, year);    // call parent constructor
    this.doors = doors;
  }

  describe() {
    // Use super.method() to call parent version
    const base = super.describe();
    return `${base} — ${this.doors}-door car`;
  }
}

class ElectricCar extends Car {
  constructor(brand, year, doors, range) {
    super(brand, year, doors);   // call Car constructor
    this.range = range;
  }

  describe() {
    const base = super.describe();   // calls Car.describe()
    return `${base} (electric, ${this.range}km range)`;
  }
}

const ev = new ElectricCar("Tesla", 2026, 4, 600);
console.log(ev.describe());
console.log(ev instanceof ElectricCar);
console.log(ev instanceof Car);
console.log(ev instanceof Vehicle);

Output

2026 Tesla — 4-door car (electric, 600km range)
true
true
true

💻 Example 3 — Multi-Level Inheritance in a Real-World Scenario

js example

class Person {
  constructor(name, age) {
    this.name = name;
    this.age  = age;
  }
  introduce() { return `Hi, I'm ${this.name}, age ${this.age}.`; }
}

class Employee extends Person {
  constructor(name, age, company, salary) {
    super(name, age);
    this.company = company;
    this.salary  = salary;
  }
  introduce() {
    return `${super.introduce()} I work at ${this.company}.`;
  }
  getAnnualSalary() { return this.salary * 12; }
}

class Manager extends Employee {
  constructor(name, age, company, salary, teamSize) {
    super(name, age, company, salary);
    this.teamSize = teamSize;
  }
  introduce() {
    return `${super.introduce()} I manage a team of ${this.teamSize}.`;
  }
}

const manager = new Manager("Riya", 35, "WoHoTech", 150000, 10);
console.log(manager.introduce());
console.log(manager.getAnnualSalary());

Output

Hi, I'm Riya, age 35. I work at WoHoTech. I manage a team of 10.
1800000

💻 Example 4 — Checking the Prototype Chain

js example

class Shape { }
class Circle extends Shape { }
class ColoredCircle extends Circle { }

const cc = new ColoredCircle();

console.log(cc instanceof ColoredCircle);   // true
console.log(cc instanceof Circle);          // true
console.log(cc instanceof Shape);           // true
console.log(cc instanceof Object);          // true — everything inherits Object

// Prototype chain:
console.log(Object.getPrototypeOf(cc) === ColoredCircle.prototype);  // true
console.log(Object.getPrototypeOf(ColoredCircle.prototype) === Circle.prototype); // true
console.log(Object.getPrototypeOf(Circle.prototype) === Shape.prototype); // true

Output

true
true
true
true
true
true
true

📋 Inheritance Keywords Quick Reference

Keyword / Method	Purpose
`extends`	Creates a child class that inherits from a parent
`super(args)`	Calls the parent class constructor
`super.method()`	Calls a parent class method from the child
`instanceof`	Checks if an object is an instance of a class/ancestor
`Object.getPrototypeOf(obj)`	Gets the prototype object of `obj`

⚠️ Common Mistakes

❌ Mistake 1 — Not Calling `super()` in Child Constructor

js example

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

class Dog extends Animal {
  constructor(name, breed) {
    this.breed = breed;    // ReferenceError — 'this' not available yet
    super(name);           // super() must come FIRST
  }
}

Output

ReferenceError: Must call super constructor in derived class before accessing 'this'

❌ Mistake 2 — Deep Inheritance Chains (Fragile Base Class Problem)

js example

// Avoid chains deeper than 3 levels — they become hard to maintain
class A extends B extends C extends D extends E { }
// A change in E can break everything else unexpectedly

❌ Mistake 3 — Forgetting `super()` Even When Not Needed

js example

class Cat extends Animal {
  constructor() {
    // If you define a constructor in a child class,
    // you MUST call super() even if you don't need extra args
  }
}
new Cat(); // ReferenceError

❌ Mistake 4 — Multiple Inheritance Is Not Supported

js example

class C extends A, B { } // SyntaxError! JavaScript only allows ONE parent

🎯 Key Takeaways

extends creates a child class that inherits all non-private members of the parent
Always call super() as the first statement in a child constructor
super.method() lets you call the parent's version of an overridden method
The instanceof operator walks the entire prototype chain
All objects ultimately inherit from Object.prototype — the root of the chain
JavaScript supports single inheritance only — use composition or mixins for multiple traits
Prefer shallow inheritance hierarchies (2–3 levels max) for maintainability

❓ Interview Questions

Q1. What is inheritance in JavaScript? > Inheritance allows a child class to acquire properties and methods of a parent class using extends. The child can use inherited members directly, add new members, or override existing ones.

Q2. What does super do in JavaScript? > super(args) calls the parent class's constructor. super.method() calls a parent class's method from within the child. In constructors, super() must be called before any use of this.

Q3. Why must super() be called before this in a subclass? > JavaScript does not create the this object until the parent constructor runs. The parent class is responsible for setting up the object. Until super() is called, this is in an uninitialized state and accessing it throws a ReferenceError.

Q4. What is method overriding? > When a child class defines a method with the same name as a parent class method, the child's version takes precedence when called on an instance of the child. The parent's version can still be accessed via super.methodName().

Q5. Does JavaScript support multiple inheritance? > No. A class can only extend one parent. However, you can simulate multiple inheritance using mixins — small functions that add methods to a class prototype — or through composition (combining multiple objects).

Q6. What is the difference between __proto__ and prototype? > prototype is a property on constructor functions/classes — it is the object that instances inherit from. __proto__ (or Object.getPrototypeOf(obj)) is the actual prototype link on an instance pointing to the constructor's prototype.

Q7. How does instanceof work? > obj instanceof Class checks whether Class.prototype exists anywhere in obj's prototype chain. Because all classes ultimately inherit from Object, anyObj instanceof Object is always true.

Q8. When should you use inheritance vs composition? > Use inheritance for true "is-a" relationships (a Dog IS an Animal). Use composition for "has-a" relationships (a Car HAS an Engine). Composition is generally more flexible — you can mix and match behaviors without deep, brittle hierarchies.

Exam Focus

Revise definitions, diagrams, examples, and short-answer points for JavaScript Inheritance – extends, super, and Prototype-Based Inheritance.

Interview Use

Prepare one clear explanation, one practical example, and one common mistake for this JavaScript Master Course topic.

Search Terms

javascript-complete-guide, javascript master course, javascript, complete, guide, oop, inheritance, javascript inheritance – extends, super, and prototype-based inheritance

Continue learning this concept

Oop In JavascriptAbstraction in JavaScript OOP – Hide Complexity, Expose SimplicityLearn abstraction in JavaScript OOP with class examples, private fields, real-world analogies, common mistakes, and interview Q&A. beginner-friendly tutorial.Oop In JavascriptJavaScript Classes Tutorial – ES6 Class Syntax, Inheritance & MoreMaster JavaScript ES6 classes with constructors, methods, static members, inheritance, private fields, and real-world examples. beginner-friendly JS OOP tutorial.Oop In JavascriptJavaScript Constructor Functions – new Keyword, Prototype & OOP PatternsUnderstand JavaScript constructor functions with the new keyword, prototype methods, object creation, comparison with ES6 classes, and interview-ready Q&A.Oop In JavascriptEncapsulation in JavaScript – Private Fields, Getters, Setters & Data ProtectionLearn encapsulation in JavaScript with private class fields, getters, setters, closures, and real-world examples. Protect your data with ES2022 OOP techniques.Oop In JavascriptObject-Oriented Programming in JavaScript – OOP Concepts Complete GuideComplete guide to OOP in JavaScript: classes, objects, the 4 pillars (encapsulation, inheritance, abstraction, polymorphism), prototype chain, and interview Q&A.Oop In JavascriptJavaScript OOP Projects – Build Real-World Apps with Classes & OOPPractice JavaScript OOP with 3 real-world projects: Shopping Cart, Library System, and Student Grade Manager. Apply classes, inheritance, encapsulation, and polymorphism.

PreviousEncapsulation in JavaScript – Private Fields, Getters, Setters & Data Protection NextObject-Oriented Programming in JavaScript – OOP Concepts Complete Guide

📊 Class Hierarchy Diagram

💻 Example 1 — Basic Inheritance

💻 Example 2 — Calling Parent Methods with super

💻 Example 3 — Multi-Level Inheritance in a Real-World Scenario

💻 Example 4 — Checking the Prototype Chain

📋 Inheritance Keywords Quick Reference

⚠️ Common Mistakes

❌ Mistake 1 — Not Calling super() in Child Constructor

❌ Mistake 2 — Deep Inheritance Chains (Fragile Base Class Problem)

❌ Mistake 3 — Forgetting super() Even When Not Needed

❌ Mistake 4 — Multiple Inheritance Is Not Supported

🎯 Key Takeaways

❓ Interview Questions

Continue learning this concept

📊 Class Hierarchy Diagram

💻 Example 1 — Basic Inheritance

💻 Example 2 — Calling Parent Methods with super

💻 Example 3 — Multi-Level Inheritance in a Real-World Scenario

💻 Example 4 — Checking the Prototype Chain

📋 Inheritance Keywords Quick Reference

⚠️ Common Mistakes

❌ Mistake 1 — Not Calling super() in Child Constructor

❌ Mistake 2 — Deep Inheritance Chains (Fragile Base Class Problem)

❌ Mistake 3 — Forgetting super() Even When Not Needed

❌ Mistake 4 — Multiple Inheritance Is Not Supported

🎯 Key Takeaways

❓ Interview Questions

Continue learning this concept

💻 Example 2 — Calling Parent Methods with `super`

❌ Mistake 1 — Not Calling `super()` in Child Constructor

❌ Mistake 3 — Forgetting `super()` Even When Not Needed

💻 Example 2 — Calling Parent Methods with `super`

❌ Mistake 1 — Not Calling `super()` in Child Constructor

❌ Mistake 3 — Forgetting `super()` Even When Not Needed