Inheritance in JavaScript — Explained in Simple Words

If you are learning Object-Oriented Programming in JavaScript, one concept that starts appearing very often is:

Inheritance

At first, it can feel confusing.

Words like parent class, child class, extends, super(), and overriding can make the topic look bigger than it really is.

When I started learning it, I realized inheritance is not as hard as it sounds.

It is mainly about reusing code in a cleaner way.

In this post, let’s understand inheritance in JavaScript in very simple words.

🧠 What Is Inheritance?

Inheritance is an OOP concept where one class can use the properties and methods of another class.

In simple words:

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

So instead of writing the same methods again and again in different classes, we can write common code once in a parent class and let child classes use it.

That is the basic idea.

🤔 Why Do We Need Inheritance?

Let’s say we write code like this:

class Dog {
  eat() {
    console.log("This animal eats food");
  }

  sleep() {
    console.log("This animal sleeps");
  }

  bark() {
    console.log("Dog barks");
  }
}

class Cat {
  eat() {
    console.log("This animal eats food");
  }

  sleep() {
    console.log("This animal sleeps");
  }

  meow() {
    console.log("Cat meows");
  }
}

This works.

But there is one problem.

Both classes have the same methods:

• eat()
• sleep()

So we are repeating code.

That is not a good idea, especially when the project becomes bigger.

Instead, we can move the common methods into one parent class.

That is where inheritance becomes useful.

📦 Parent Class and Child Class

To understand inheritance, we first need to know these two terms.

Parent Class

A parent class is the class that contains common properties and methods.

It acts like a base.

Child Class

A child class is the class that inherits from the parent class.

It can use parent features and also add its own features.

In simple words:

• parent class = common features
• child class = common features + own features

⚙️ extends in JavaScript

In JavaScript, we use the extends keyword to create inheritance.

Example:

class Dog extends Animal {
}

This means:

Dog inherits from Animal.

So if Animal has some methods, Dog can use them too.

That is the first syntax rule to remember.

💻 A Very Simple Example

class Animal {
  eat() {
    console.log("Animal eats food");
  }
}

class Dog extends Animal {
}

const dog = new Dog();
dog.eat();

Output

Animal eats food

Why does this work?

Because Dog inherited the eat() method from Animal.

Even though Dog does not define eat() itself, it can still use it.

That is inheritance in the simplest way.

🐣 Child Class Can Also Add Its Own Methods

Inheritance does not mean the child class only depends on the parent.

The child class can also add its own methods.

class Bird {
  move() {
    console.log("Bird moves");
  }
}

class Parrot extends Bird {
  speak() {
    console.log("Parrot speaks");
  }
}

const parrot = new Parrot();

parrot.move();
parrot.speak();

Output

Bird moves
Parrot speaks

Here:

• move() comes from the parent class
• speak() belongs to the child class

So the child class gets:

• inherited methods
• its own methods

That is one of the most important ideas in inheritance.

🏗️ Constructor in Inheritance

Now let’s go one step deeper.

Sometimes classes do not only have methods.

They also store data.

For that, we use a constructor.

Example:

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

  sayName() {
    console.log(`My name is ${this.name}`);
  }
}

If we do this:

const person = new Person("Saurav");
person.sayName();

Output

My name is Saurav

Now let’s connect this with inheritance.

🔑 What Is super() in JavaScript?

When a child class has its own constructor, and the parent class also has a constructor, we use super().

super() is used to call the parent constructor.

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

  showName() {
    console.log(`Name is ${this.name}`);
  }
}

class Teacher extends Person {
  constructor(name, subject) {
    super(name);
    this.subject = subject;
  }

  showSubject() {
    console.log(`Subject is ${this.subject}`);
  }
}

const teacher = new Teacher("Saurav", "Math");

teacher.showName();
teacher.showSubject();

Output

Name is Saurav
Subject is Math

What is happening here?

Let’s understand it step by step:

1. Teacher inherits from Person
2. Person stores name
3. Teacher stores subject
4. super(name) sends the value to the parent constructor
5. So the object gets both name and subject

That is why super() is important.

⚠️ Important Rule About super()

Inside a child class constructor, we must call super() before using this.

Correct:

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

class Car extends Vehicle {
  constructor(brand, model) {
    super(brand);
    this.model = model;
  }
}

If we try to use this before super(), JavaScript throws an error.

So this is an important rule to remember:

In a child constructor, call super() first.

🔄 Method Overriding

Sometimes the child class does not want to use the parent method exactly as it is.

It wants to provide its own version.

That is called method overriding.

class User {
  login() {
    console.log("User logged in");
  }
}

class Admin extends User {
  login() {
    console.log("Admin logged in");
  }
}

const admin = new Admin();
admin.login();

Output

Admin logged in

Here, both parent and child have a method called login().

When we call login() using the Admin object, JavaScript uses the child version.

In simple words:

Method overriding means the child class creates its own version of a parent method using the same method name.

⬆️ Calling Parent Method with super

Sometimes we do not want to completely replace the parent method.

We want to call the parent method first and then add more behavior.

For that, we use:

super.methodName()

Example:

class User {
  login() {
    console.log("User logged in");
  }
}

class Admin extends User {
  login() {
    super.login();
    console.log("Admin has special access");
  }
}

const admin = new Admin();
admin.login();

Output

User logged in
Admin has special access

So here:

• super.login() calls the parent method
• then the child adds extra behavior

This is useful when we want to extend parent behavior instead of fully replacing it.

🧱 Types of Inheritance

There are a few common types of inheritance you should know.

1. Single Inheritance

In single inheritance, one child class inherits from one parent class.

class Device {
  powerOn() {
    console.log("Device powers on");
  }
}

class Laptop extends Device {
  code() {
    console.log("Laptop is used for coding");
  }
}

Here, Laptop inherits from Device.

That is single inheritance.

2. Multilevel Inheritance

In multilevel inheritance, inheritance happens in a chain.

class LivingThing {
  grow() {
    console.log("Living thing grows");
  }
}

class Plant extends LivingThing {
  needWater() {
    console.log("Plant needs water");
  }
}

class Tree extends Plant {
  giveOxygen() {
    console.log("Tree gives oxygen");
  }
}

Here:

• Plant inherits from LivingThing
• Tree inherits from Plant

So inheritance is happening across multiple levels.

That is multilevel inheritance.

3. Hierarchical Inheritance

In hierarchical inheritance, multiple child classes inherit from the same parent class.

class Appliance {
  turnOn() {
    console.log("Appliance turns on");
  }
}

class Fan extends Appliance {
  spin() {
    console.log("Fan spins");
  }
}

class Light extends Appliance {
  glow() {
    console.log("Light glows");
  }
}

Here:

• Fan and Light both inherit from Appliance

That is hierarchical inheritance.

🧑‍💼 Practical Example

Let’s understand inheritance with one practical example.

class Employee {
  constructor(name, id) {
    this.name = name;
    this.id = id;
  }

  displayDetails() {
    console.log(`Name : ${this.name}`);
    console.log(`Id : ${this.id}`);
  }
}

class Manager extends Employee {
  constructor(name, id, teamSize) {
    super(name, id);
    this.teamSize = teamSize;
  }

  displayDetails() {
    super.displayDetails();
    console.log(`Team Size : ${this.teamSize}`);
  }
}

class Engineer extends Employee {
  constructor(name, id, specialization) {
    super(name, id);
    this.specialization = specialization;
  }

  displayDetails() {
    super.displayDetails();
    console.log(`Specialization : ${this.specialization}`);
  }
}

const manager = new Manager("Jax", 101, 8);
manager.displayDetails();

const engineer = new Engineer("William", 202, "Backend Developer");
engineer.displayDetails();

This example shows many important things together:

• common data inside Employee
• extra data inside Manager and Engineer
• constructor chaining using super()
• method overriding using displayDetails()
• calling parent method with super.displayDetails()

This is one of the best ways to understand inheritance in a practical way.

❌ Does JavaScript Support Multiple Inheritance?

This is an important point.

With JavaScript classes, multiple inheritance is not supported.

That means one class can extend only one class at a time.

So this is not valid:

class C extends A, B {
}

In JavaScript class syntax:

• single inheritance → yes
• multilevel inheritance → yes
• hierarchical inheritance → yes
• multiple inheritance → no

⚠️ Common Beginner Mistakes

Here are some common mistakes beginners make:

1. Forgetting extends

Without extends, inheritance does not happen.

2. Forgetting super() in child constructor

If the child class has its own constructor, it must call the parent constructor properly.

3. Using this before super()

This causes an error in JavaScript.

4. Thinking overriding means changing parent code

We do not directly change the parent class.

We create the same method name in the child class and provide a different implementation.

🧠 Key Takeaway

Inheritance in JavaScript is mainly about code reuse.

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

In simple words:

• parent class contains common features
• child class reuses those features
• child class can also add its own features
• child class can override parent methods when needed

If you understand these clearly:

• extends
• super()
• method overriding
• inheritance types

then your inheritance foundation is strong.

✅ Final Thoughts

Inheritance can feel confusing at first.

But once you practice it with small examples, it starts making much more sense.

For me, the biggest shift was to stop thinking of inheritance as a big theory topic and start seeing it as a simple way to reuse common code.

If one class already has something useful, another class can inherit it instead of rewriting it.

That is the real value of inheritance.

If you are learning OOP in JavaScript right now, take it step by step.

Do not rush.

Start with small examples, understand extends, then super(), then overriding.

That makes the topic much easier.

👋 About Me

Hi, I’m Saurav Kumar.

I enjoy learning, building, and writing about web development in simple words, especially topics that are useful for beginners and developers preparing for interviews.

Right now, I’m also focusing on improving my understanding of core concepts like JavaScript, OOP, system design, and software engineering fundamentals.

Let's connect!

🐙 GitHub: @saurav02022
💼 LinkedIn: Saurav Kumar

If you found this helpful, share it with a friend learning JavaScript — it might help them too.

Until next time, keep coding and keep learning 🚀