Home Tutorials Videos Q&A MCQ Shortcuts Exercises Appointment Login
Lesson 29 of 30 – JavaScript Inheritance
97%

JavaScript Inheritance

Inheritance is an important concept in Object-Oriented Programming (OOP). In JavaScript, inheritance is achieved using the prototype object, which allows one object to access properties and methods of another object.

Note: JavaScript uses Prototypal Inheritance instead of classical inheritance.
What is Inheritance?

Inheritance allows one class or object to acquire properties and methods from another class or object.

It helps in code reusability and reduces duplication.

Inheritance in JavaScript

JavaScript supports inheritance through prototype objects.

This technique is commonly known as Prototypal Inheritance or Behavior Delegation.

Creating a Parent Class

Let's create a Person class with FirstName and LastName properties.

function Person(firstName,lastName){
this.FirstName = firstName || "unknown";
this.LastName = lastName || "unknown";
}
Adding Method to Prototype

Methods can be added to the prototype object so that all instances can access them.

Person.prototype.getFullName = function(){
return this.FirstName + " " + this.LastName;
}
Why Use Prototype?

Prototype methods are shared among all objects created from the constructor.

  • Reduces memory usage.
  • Improves performance.
  • Supports inheritance.
Example of Parent Object
var person1 = new Person("Amit","Kumar");
alert(person1.getFullName());
Output:

Amit Kumar

Creating Child Class

Suppose we want a Student class that inherits all properties and methods of Person.

This avoids rewriting FirstName, LastName, and getFullName().

Benefits of Inheritance
  • Code reusability.
  • Less duplication.
  • Easier maintenance.
  • Better organization of code.
Important Note: Multiple Inheritance

JavaScript does not support multiple inheritance directly like some other programming languages.

However, similar functionality can be achieved using mixins and object composition.

Method Overriding

A child object or class can override methods of its parent by creating a method with the same name.

Person.prototype.show = function(){
return "Parent Method";
}

Student.prototype.show = function(){
return "Child Method";
}

The child's method will be executed instead of the parent's method.

Inheritance and this Keyword

The this keyword always refers to the current object instance.

It works correctly in both parent and child objects.

function Person(name){
this.name = name;
}
Object.create() Method

The Object.create() method creates a new object using an existing object as its prototype.

var student = Object.create(Person.prototype);

This is one of the most common ways to implement inheritance.

Prototype Chain

When JavaScript cannot find a property in an object, it searches the object's prototype.

If not found there, it continues searching through the prototype chain.

Prototype Chain Example
student → Person.prototype → Object.prototype → null

JavaScript follows this chain until the requested property or method is found.

Key Concepts
Concept Description
Prototype Object used for inheritance
Object.create() Creates object with specified prototype
Prototype Chain Search path for properties and methods
Method Overriding Replacing parent method in child
Real Life Example

A Student can inherit properties like Name and Age from Person.

The Student class can also add its own properties such as Roll Number, Course, or Marks.

Person → Student
Name, Age → RollNo, Course
Advantages of Inheritance
  • Promotes code reusability.
  • Reduces duplicate code.
  • Makes programs easier to maintain.
  • Improves code organization.
  • Allows extension of existing functionality.
  • Supports Object-Oriented Programming concepts.
Points to Remember
  • JavaScript uses Prototypal Inheritance.
  • Inheritance is implemented through prototype objects.
  • Object.create() helps create inherited objects.
  • The prototype chain is used to search properties and methods.
  • Child objects can override parent methods.
  • JavaScript does not support multiple inheritance directly.
  • The this keyword refers to the current object instance.
  • Inheritance improves code reusability and maintainability.

🧠 Quick Quiz

Which object is mainly used to implement inheritance in JavaScript?



← Previous Course Complete 🎉