learn2kode.in

Menu

JavaScript Tutorial

Menu

What Is Inheritance in JavaScript?

JavaScript inheritance is a core concept of object-oriented programming that allows one object or class to reuse properties and methods from another. The object that shares data is called the parent, and the one that receives it is called the child.
Inheritance helps reduce duplicate code and makes applications easier to maintain.

Why Inheritance Is Important

Inheritance allows developers to:
  • Reuse existing code
  • Create cleaner and organized programs
  • Build scalable applications
  • Follow real-world relationships (parent → child)
  • Improve maintainability
It is widely used in JavaScript OOP, frameworks, and modern web applications.

Types of Inheritance in JavaScript

JavaScript supports inheritance mainly through:
  • Prototypal inheritance
  • Class-based inheritance (ES6)
Both work internally using the prototype chain.

Prototypal Inheritance Explained

Every JavaScript object has a hidden link called a prototype. When you access a property, JavaScript looks for it in the object first, then in its prototype.
Example:
Copy Text 
const parent = {
  greet() {
    return "Hello from parent";
  }
};

const child = Object.create(parent);

console.log(child.greet());
Here, child inherits the greet() method from parent.

Constructor Function Inheritance

Inheritance can also be achieved using constructor functions.
Example:
Copy Text 
function Person(name) {
  this.name = name;
}

Person.prototype.sayHello = function () {
  return "Hi, I am " + this.name;
};

function Developer(name, role) {
  Person.call(this, name);
  this.role = role;
}

Developer.prototype = Object.create(Person.prototype);
Developer.prototype.constructor = Developer;
This approach is common in older JavaScript codebases.

ES6 Class Inheritance (Recommended)

ES6 introduced a cleaner syntax using class and extends.
Example:
Copy Text 
class Person {
  constructor(name) {
    this.name = name;
  }

  greet() {
    return `Hello, I am ${this.name}`;
  }
}

class Developer extends Person {
  constructor(name, skill) {
    super(name);
    this.skill = skill;
  }
}
This is the modern and recommended way to implement inheritance.
The Role of extends and super
  • extends creates a child class
  • super() calls the parent constructor
  • Allows access to parent methods and properties
Without super(), the child class cannot access this.
Inheritance vs Composition
Inheritance focuses on is-a relationships, while composition focuses on has-a relationships.
  • Inheritance: Developer is a Person
  • Composition: Car has an Engine

Modern JavaScript often combines both for better flexibility.

Common Mistakes in JavaScript Inheritance
  • Forgetting to call super() in child class
  • Overusing inheritance where composition is better
  • Modifying prototypes incorrectly
  • Deep inheritance chains
Avoiding these improves code quality.

When Should You Use Inheritance?

Use inheritance when:
  • Objects share common behavior
  • Parent-child relationship exists
  • Code reuse is important
  • Building structured OOP systems
Avoid inheritance for unrelated features.

Final Thoughts

JavaScript inheritance is essential for mastering object-oriented programming. Whether you use prototypes or ES6 classes, understanding inheritance will help you write cleaner, reusable, and scalable code.
JavaScript Constructors
JavaScript Modules