Edit Template
Edit Template

Inheritance in JavaScript

Inheritance is one of the key concepts in object-oriented programming. It allows you to build new features on top of existing code—kind of like moving into a house and adding your own furniture instead of building from scratch.

In JavaScript, inheritance works a bit differently than traditional class-based languages. Instead of class-to-class inheritance, it uses something called the prototype chain.

Let’s understand how it works with a custom example.

Classical Inheritance with Prototypes

Suppose we want to represent people and students. A student is also a person, right? So instead of repeating everything, we let the Student inherit from the Person.

Here’s how:

				
					function Person(name, age) {
  this.name = name;
  this.age = age;
}

Person.prototype.introduce = function () {
  return `Hi, I'm ${this.name}, and I'm ${this.age} years old.`;
};

// Student inherits from Person
function Student(name, age, course) {
  Person.call(this, name, age); // Reuse Person's constructor
  this.course = course;
}

// Link Student's prototype to Person's
Student.prototype = Object.create(Person.prototype);
Student.prototype.constructor = Student;

Student.prototype.study = function () {
  return `${this.name} is studying ${this.course}.`;
};

// Using the Student
const student = new Student("Ahsan", 22, "Mathematics");

console.log(student.introduce());  // Hi, I'm Ahsan, and I'm 22 years old.
console.log(student.study());      // Ahsan is studying Mathematics

				
			

What’s Happening Behind the Scenes?

  • Person.call(this, ...) copies the properties (like name and age) from the Person constructor.

  • Student.prototype = Object.create(Person.prototype) sets up inheritance so that the student object also gets access to introduce().

  • Student.prototype.constructor = Student corrects the reference to point back to Student.

Thanks to prototypes, JavaScript objects can inherit methods from other objects without duplicating them.

Inheritance in Modern JavaScript

Since ES6, JavaScript also introduced a class-based syntax which is more readable and similar to other languages:

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

  introduce() {
    return `Hi, I'm ${this.name}, and I'm ${this.age} years old.`;
  }
}

class Student extends Person {
  constructor(name, age, course) {
    super(name, age); // Call the parent class constructor
    this.course = course;
  }

  study() {
    return `${this.name} is studying ${this.course}.`;
  }
}

const student = new Student("Sara", 21, "Physics");
console.log(student.introduce());  // Hi, I'm Sara, and I'm 21 years old.
console.log(student.study());      // Sara is studying Physics

				
			

Using extends and super, inheritance becomes easier to implement and understand.

Why Use Inheritance?

  • Reusability: Reuse common code between related objects.

  • Organization: Group shared functionality logically.

  • Scalability: Add more features over time without rewriting old code.

Final Thoughts

Inheritance in JavaScript helps you build powerful object structures by sharing behaviors across related types. You can choose between prototype-based or class-based inheritance depending on your comfort level and project style. Either way, understanding how inheritance works will help you write cleaner and smarter code in your JavaScript projects.

Scroll to Top