class Animal { speak() { ... } }
class Dog extends Animal {
  constructor(name) {
    super(name); // must call super before 'this'
  }
  fetch() { ... }
}

Deep Dive Course

ES6 **extends** implements prototype-based inheritance cleanly. The child class must call **super()** in its constructor before accessing `this`. Calling `super.method()` invokes the parent's method. Under the hood, this sets up the prototype chain so child instances have access to parent prototype methods.

1Understanding Inheritance

ES6 extends implements prototype-based inheritance cleanly. The child class must call super() in its constructor before accessing this. Calling super.method() invokes the parent's method. Under the hood, this sets up the prototype chain so child instances have access to parent prototype methods.

💡

Always call super() before using 'this' in a subclass constructor — it's required, or you get a ReferenceError.

editor.html

class Shape {
  constructor(color) { this.color = color; }
  describe() { return `A ${this.color} shape`; }
}

class Circle extends Shape {
  constructor(color, radius) {
    super(color);  // must be first!
    this.radius = radius;
  }
  area() { return Math.PI * this.radius ** 2; }
  describe() { return `${super.describe()} (circle r=${this.radius})`; }
}

const c = new Circle('red', 5);
console.log(c.describe());
console.log(c.area().toFixed(2));

localhost:3000

2Practical Example

Here is a real-world application of Inheritance showing how it is used in production JavaScript code.

editor.html

// instanceof checks prototype chain
console.log(c instanceof Circle); // true
console.log(c instanceof Shape);  // true
console.log(c instanceof Object); // true

localhost:3000

3Best Practices

Follow these guidelines when working with Inheritance:

1. Use extends for is-a relationships

2. Prefer composition over inheritance for has-a relationships

3. Call super() first in subclass constructors

⚠️

Tip: Always call super() before using 'this' in a subclass constructor — it's required, or you get a ReferenceError.

editor.html

class Shape {
  constructor(color) { this.color = color; }
  describe() { return `A ${this.color} shape`; }
}

class Circle extends Shape {
  constructor(color, radius) {
    super(color);  // must be first!
    this.radius = radius;
  }
  area() { return Math.PI * this.radius ** 2; }
  describe() { return `${super.describe()} (circle r=${this.radius})`; }
}

const c = new Circle('red', 5);
console.log(c.describe());
console.log(c.area().toFixed(2));

localhost:3000

Examples

Example 01Basic Usage

class Shape {
  constructor(color) { this.color = color; }
  describe() { return `A ${this.color} shape`; }
}

class Circle extends Shape {
  constructor(color, radius) {
    super(color);  // must be first!
    this.radius = radius;
  }
  area() { return Math.PI * this.radius ** 2; }
  describe() { return `${super.describe()} (circle r=${this.radius})`; }
}

const c = new Circle('red', 5);
console.log(c.describe());
console.log(c.area().toFixed(2));

Example 02Advanced Example

// instanceof checks prototype chain
console.log(c instanceof Circle); // true
console.log(c instanceof Shape);  // true
console.log(c instanceof Object); // true

Best Practices

Use extends for is-a relationships
Prefer composition over inheritance for has-a relationships
Call super() first in subclass constructors

Interview Question

What is the difference between classical and prototypal inheritance?▼

Hint: Classes vs objects inheriting from objects.

Classical inheritance (Java/C++) creates instances from class blueprints. Prototypal inheritance (JavaScript) has objects inheriting directly from other objects. ES6 classes are SYNTACTIC SUGAR over prototypal inheritance — under the hood, it's still prototype chains, not true classes.

Exercises

MediumPractice using Inheritance in a real scenario.

View Solution

class Shape {
  constructor(color) { this.color = color; }
  describe() { return `A ${this.color} shape`; }
}

class Circle extends Shape {
  constructor(color, radius) {
    super(color);  // must be first!
    this.radius = radius;
  }
  area() { return Math.PI * this.radius ** 2; }
  describe() { return `${super.describe()} (circle r=${this.radius})`; }
}

const c = new Circle('red', 5);
console.log(c.describe());
console.log(c.area().toFixed(2));

Frequently Asked Questions

What is the difference between classical and prototypal inheritance?▼

Related Functions

PrototypesClassesConstructorsthis