JavaScript Inheritance, extends, and super

Inheritance is one of the core concepts of Object-Oriented Programming (OOP).

It allows one class to acquire properties and methods from another class.

Parent Class
      |
      v
Child Class

This promotes:

Code Reuse
Maintainability
Scalability
What is Inheritance?

Inheritance allows a child class to reuse functionality from a parent class.

Example:

Animal
 |
 +-- eat()

Dog
 |
 +-- bark()

Dog can use:

eat()

without rewriting it.

Why Do We Need Inheritance?

Without Inheritance:

class Dog {

    eat() {
        console.log("Eating");
    }

    bark() {
        console.log("Barking");
    }

}

class Cat {

    eat() {
        console.log("Eating");
    }

    meow() {
        console.log("Meow");
    }

}

Problem:

Duplicate Code

Solution:

Create Common Parent Class
Parent Class
class Animal {

    eat() {
        console.log("Eating");
    }

}
Child Class Using extends
class Dog extends Animal {

    bark() {
        console.log("Barking");
    }

}

Usage:

const dog = new Dog();

dog.eat();
dog.bark();

Output:

Eating
Barking
extends Diagram
Animal
   |
   v
Dog

Dog inherits all methods from Animal.

How extends Works Internally
Dog
 |
 v
Animal
 |
 v
Object
 |
 v
null

JavaScript creates a prototype chain.

Inheriting Multiple Methods

Parent:

class Animal {

    eat() {
        console.log("Eating");
    }

    sleep() {
        console.log("Sleeping");
    }

}

Child:

class Dog extends Animal {

    bark() {
        console.log("Barking");
    }

}

Usage:

dog.eat();
dog.sleep();
dog.bark();

Output:

Eating
Sleeping
Barking
Constructor in Parent Class
class Animal {

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

}
What is super()?

super() calls the parent constructor.

Child:

class Dog extends Animal {

    constructor(name) {

        super(name);

    }

}

Usage:

const dog =
new Dog("Tommy");

console.log(dog.name);

Output:

Tommy
super() Flow
Dog Constructor
      |
      v
super(name)
      |
      v
Animal Constructor
      |
      v
Initialize Parent Properties
Why super() is Required

Wrong:

class Dog extends Animal {

    constructor(name) {

        this.name = name;

    }

}

Output:

ReferenceError

Correct:

super(name);

must be called first.

Child Class Constructor
class Dog extends Animal {

    constructor(name, breed) {

        super(name);

        this.breed = breed;

    }

}

Usage:

const dog =
new Dog(
    "Tommy",
    "Labrador"
);

Object:

{
  name: "Tommy",
  breed: "Labrador"
}
Method Overriding

Child class can replace parent behavior.

Parent:

class Animal {

    speak() {
        console.log("Animal Sound");
    }

}

Child:

class Dog extends Animal {

    speak() {
        console.log("Bark");
    }

}

Output:

Bark
Overriding Diagram
Animal
 |
 +-- speak()

Dog
 |
 +-- speak()
      |
      +-- Overrides Parent
Calling Parent Method Using super

Parent:

class Animal {

    speak() {
        console.log("Animal Sound");
    }

}

Child:

class Dog extends Animal {

    speak() {

        super.speak();

        console.log("Bark");

    }

}

Output:

Animal Sound
Bark
super for Methods
super()
----------
Parent Constructor

super.method()
--------------
Parent Method
Real World Example

Parent:

class Employee {

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

    work() {
        console.log("Working");
    }

}

Child:

class Developer
extends Employee {

    code() {
        console.log("Coding");
    }

}

Usage:

const dev =
new Developer("Venu");

dev.work();
dev.code();

Output:

Working
Coding
Multi-Level Inheritance
class Person {}

class Employee
extends Person {}

class Developer
extends Employee {}

Diagram:

Person
   |
Employee
   |
Developer
instanceof Operator

Check inheritance relationship.

const dog =
new Dog();
console.log(
    dog instanceof Dog
);

Output:

true
console.log(
    dog instanceof Animal
);

Output:

true
Common Mistakes
Forgetting super()

Wrong:

constructor() {

    this.name = "Tommy";

}

Correct:

super();
Overusing Inheritance

Bad:

A
 |
B
 |
C
 |
D
 |
E

Deep inheritance becomes difficult to maintain.

Forgetting Method Override
class Dog extends Animal {}

If no override exists:

Parent Method Executes
Best Practices
Use inheritance only when there is a true "is-a" relationship.
Prefer composition over deep inheritance.
Always call super() first in child constructors.
Keep inheritance hierarchy simple.
Override methods only when necessary.
Interview Questions
What is Inheritance?

A mechanism where a child class acquires properties and methods from a parent class.

What does extends do?

Creates an inheritance relationship between classes.

What is super()?

Calls the parent constructor.

Why must super() be called first?

Because JavaScript must initialize the parent object before using this.

What is Method Overriding?

Replacing parent method implementation in child class.

Difference Between extends and super?
extends
-------
Creates Inheritance

super
-----
Accesses Parent Constructor/Methods
Is JavaScript Class-Based?

Not internally.

Classes
   |
   v
Prototypes

Classes are syntactic sugar over prototypes.

Cheat Sheet
Inheritance
-----------
Code Reuse

Keywords
--------
extends
super

extends
-------
Creates Parent-Child Relationship

super()
-------
Calls Parent Constructor

super.method()
--------------
Calls Parent Method

Benefits
--------
Reuse
Maintainability
Scalability

Common Concepts
---------------
Method Overriding
Constructor Chaining
Multi-Level Inheritance
Summary

Inheritance allows child classes to reuse functionality from parent classes.

Key Concepts:

Inheritance
extends
super()
Method Overriding
Constructor Chaining
instanceof

Understanding inheritance is essential before learning:

Advanced OOP
Design Patterns
SOLID Principles
TypeScript
Enterprise JavaScript Development