JavaScript Inheritance

Inheritance is one of the fundamental concepts of Object-Oriented Programming (OOP). It allows one class to inherit properties and methods from another class, helping developers reuse code and create relationships between related objects.

In JavaScript, inheritance is commonly implemented using the extends keyword. The super() function allows a child class to call its parent class’s constructor, while super.methodName() allows it to call a parent class method.

For example, a Car class and a Bike class can inherit common properties and methods from a Vehicle class. This avoids repeating the same code in multiple classes.

In this tutorial, you will learn how inheritance works in JavaScript, how to create parent and child classes, and how to override inherited methods.

What Is Inheritance in JavaScript?

Inheritance is an OOP feature that allows a class to reuse and extend the functionality of another class.

The class providing the shared functionality is called the parent class or base class. The class that inherits that functionality is called the child class or derived class.

For example, a Vehicle class might contain common properties such as brand and methods such as start(). A Car class can inherit those features and add its own behavior.

Example of Inheritance

class Vehicle {
  start() {
    console.log("Vehicle started");
  }
}

class Car extends Vehicle {
  drive() {
    console.log("Car is driving");
  }
}

const myCar = new Car();

myCar.start();
myCar.drive();

Output:

Vehicle started
Car is driving

In this example:

• Vehicle is the parent class.
• Car is the child class.
• extends establishes the inheritance relationship.
• myCar can call both the inherited start() method and its own drive() method.

Inheritance helps you build related classes without duplicating shared functionality.

Parent Class in JavaScript

A parent class defines properties and methods that can be inherited by other classes.

For example, a parent class might define common behavior for different types of employees.

class Employee {
  work() {
    console.log("Employee is working");
  }

  takeBreak() {
    console.log("Employee is taking a break");
  }
}

const employee = new Employee();

employee.work();
employee.takeBreak();

Output:

Employee is working
Employee is taking a break

The Employee class can also serve as a parent for more specialized classes, such as Developer or Manager.

Child Class in JavaScript

A child class inherits accessible properties and methods from its parent class. It can also define its own properties and methods.

Example of a Child Class

class Employee {
  work() {
    console.log("Employee is working");
  }
}

class Developer extends Employee {
  writeCode() {
    console.log("Developer is writing code");
  }
}

const developer = new Developer();

developer.work();
developer.writeCode();

Output:

Employee is working
Developer is writing code

The Developer class inherits the work() method from Employee and adds a new writeCode() method.

This approach makes it easier to organize common behavior in a parent class while keeping specialized functionality in child classes.

The extends Keyword in JavaScript

The extends keyword creates an inheritance relationship between classes.

Syntax

class Parent {
  // Shared properties and methods
}

class Child extends Parent {
  // Additional properties and methods
}

The child class can use inherited methods and define additional methods of its own.

Example of extends

class Animal {
  eat() {
    console.log("Animal is eating");
  }
}

class Dog extends Animal {
  bark() {
    console.log("Dog is barking");
  }
}

const dog = new Dog();

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

Output:

Animal is eating
Dog is barking

The Dog class inherits eat() from Animal and defines its own bark() method.

JavaScript uses its prototype system to provide this inherited behavior. The extends keyword gives developers a clear syntax for creating class hierarchies.

The super() Function in JavaScript

The super keyword allows a child class to access functionality from its parent class.

Inside a derived class constructor, super() calls the parent constructor.

When a child class defines its own constructor, it must call super() before accessing this.

Example of super()

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

class Student extends Person {
  constructor(name, course) {
    super(name);
    this.course = course;
  }

  display() {
    console.log(this.name);
    console.log(this.course);
  }
}

const student = new Student("Karim", "JavaScript");

student.display();

Output:

Karim
JavaScript

How super() Works

• Person is the parent class.
• Student inherits from Person.
• super(name) calls the parent constructor.
• The parent constructor initializes this.name.
• The child constructor initializes this.course.
• The display() method accesses both properties.

The super() call must happen before the derived constructor uses this.

If a derived class does not declare its own constructor, JavaScript provides a default derived constructor that forwards the arguments to the parent constructor.

Calling Parent Methods with super

The super keyword can also call a method defined on the parent class.

Example of super.methodName()

class Animal {
  speak() {
    console.log("Animal makes a sound");
  }
}

class Dog extends Animal {
  speak() {
    super.speak();
    console.log("Dog barks");
  }
}

const dog = new Dog();

dog.speak();

Output:

Animal makes a sound
Dog barks

The child class overrides speak() but calls the parent’s version using super.speak() before adding its own behavior.

This is useful when a child class needs to extend a parent’s behavior rather than replace it completely.

Method Overriding in JavaScript

Method overriding occurs when a child class defines a method with the same name as an inherited method.

When that method is called on a child instance, the child class’s implementation is used.

Example of Method Overriding

class Animal {
  sound() {
    console.log("Animal makes a sound");
  }
}

class Dog extends Animal {
  sound() {
    console.log("Dog barks");
  }
}

const animal = new Animal();
const dog = new Dog();

animal.sound();
dog.sound();

Output:

Animal makes a sound
Dog barks

The Dog class provides its own implementation of sound(). As a result, calling sound() on a Dog instance uses the overridden method.

Method Overriding with super

You can call the original parent implementation and then add more behavior.

class Employee {
  introduce() {
    console.log("I am an employee");
  }
}

class Manager extends Employee {
  introduce() {
    super.introduce();
    console.log("I manage a team");
  }
}

const manager = new Manager();

manager.introduce();

Output:

I am an employee
I manage a team

This lets the child class reuse the parent’s method while extending its functionality.

Example of Inheritance with Properties and Methods

Consider an application that manages different types of employees. All employees have a name, but developers and managers have different responsibilities.

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

  displayName() {
    console.log(`Employee: ${this.name}`);
  }
}

class Developer extends Employee {
  writeCode() {
    console.log(`${this.name} is writing code`);
  }
}

class Manager extends Employee {
  manageTeam() {
    console.log(`${this.name} is managing a team`);
  }
}

const developer = new Developer("Karim");
const manager = new Manager("Ahmed");

developer.displayName();
developer.writeCode();

manager.displayName();
manager.manageTeam();

Output:

Employee: Karim
Karim is writing code
Employee: Ahmed
Ahmed is managing a team

Both child classes inherit the constructor behavior and displayName() method from Employee. Each child class also defines its own specialized method.

Types of Inheritance in JavaScript

Inheritance can be organized into different structures depending on how classes relate to one another.

Single Inheritance

A child class inherits from one parent class.

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

class Dog extends Animal {
  bark() {
    console.log("Barking");
  }
}

const dog = new Dog();

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

Output:

Eating
Barking

Multilevel Inheritance

A class inherits from a child class, creating a chain of inheritance.

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

class Mammal extends Animal {
  walk() {
    console.log("Walking");
  }
}

class Dog extends Mammal {
  bark() {
    console.log("Barking");
  }
}

const dog = new Dog();

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

Output:

Eating
Walking
Barking

The Dog class inherits behavior from Mammal, which inherits from Animal.

Hierarchical Inheritance

Multiple child classes inherit from the same parent class.

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

class Dog extends Animal {
  bark() {
    console.log("Barking");
  }
}

class Cat extends Animal {
  meow() {
    console.log("Meowing");
  }
}

const dog = new Dog();
const cat = new Cat();

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

cat.eat();
cat.meow();

Output:

Eating
Barking
Eating
Meowing

Both Dog and Cat inherit the eat() method from Animal, while each class has its own behavior.

JavaScript class syntax does not support directly extending two classes at once. When a design needs functionality from multiple sources, developers can use composition, mixins, or other patterns.

Advantages of Inheritance in JavaScript

Inheritance offers several benefits when used appropriately.

• Code reuse: Shared methods can be defined once in a parent class.
• Organization: Related classes can be arranged in a clear hierarchy.
• Extensibility: Child classes can add specialized behavior.
• Maintainability: Common functionality can be updated in one place.
• Method overriding: Child classes can customize inherited behavior.

However, deep or unnecessary inheritance hierarchies can make code harder to understand. Use inheritance when there is a meaningful relationship between the parent and child classes.

Inheritance vs Encapsulation

Inheritance and encapsulation are different OOP concepts.

Inheritance	Encapsulation
Allows a class to reuse and extend another class’s functionality	Controls access to an object’s internal state
Uses extends and super	Commonly uses private fields, methods, getters, and setters
Focuses on relationships between classes	Focuses on organizing and protecting data and behavior
Example: Dog extends Animal	Example: a private account balance controlled by deposit and withdrawal methods

Both concepts can be used together to create organized and maintainable JavaScript applications.

Common Mistakes When Using Inheritance

Forgetting super() in a Child Constructor

If a child class defines its own constructor, it must call super() before accessing this.

Incorrect:

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

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

Creating a Student with this constructor causes a ReferenceError because this is accessed before super() is called.

Correct:

class Student extends Person {
  constructor(name) {
    super(name);
  }
}

Using the Wrong Parent Class Method

Use super.methodName() when you want to call the parent implementation from an overriding child method.

Calling this.methodName() inside an override usually calls the child implementation again, which can lead to infinite recursion.

Overusing Inheritance

Not every class needs a parent class. If two classes merely share a few unrelated behaviors, composition may be simpler than creating an inheritance hierarchy.

Assuming Private Fields Are Directly Inherited

JavaScript private fields are not accessible directly from child class code. A child class must use the parent’s public or protected-by-convention interface, such as public methods or getters, to work with the parent’s private state.

FAQs About JavaScript Inheritance

What is inheritance in JavaScript?

Inheritance allows one class to inherit accessible methods and properties from another class and add or customize functionality.

What is the purpose of extends?

The extends keyword establishes an inheritance relationship between a child class and a parent class.

What does super() do in JavaScript?

Inside a derived class constructor, super() calls the parent constructor. It must be called before the derived constructor accesses this.

What is method overriding?

Method overriding occurs when a child class defines its own implementation of an inherited method with the same name.

Can a JavaScript class inherit from multiple classes?

A class cannot directly extend two classes at once. You can use composition or mixins when you need to combine behavior from multiple sources.

What is multilevel inheritance?

Multilevel inheritance occurs when a class inherits from another class that itself inherits from a parent class, forming a chain.

Does JavaScript support inheritance without classes?

Yes. JavaScript uses prototype-based inheritance. Objects can inherit from other objects through their prototype chains, even without class syntax.

Conclusion

Inheritance is an important JavaScript OOP concept that allows classes to reuse and extend functionality. The extends keyword defines the relationship between parent and child classes, super() calls the parent constructor, and super.methodName() calls a parent method.

Method overriding lets child classes customize inherited behavior, while single, multilevel, and hierarchical inheritance provide different ways to organize related classes.

By using inheritance thoughtfully, you can reduce duplicated code and build JavaScript applications with clear, reusable structures.