How Inheritance Works in Constructor Functions in JavaScript

In this article we will be discussing how inheritance works in JavaScript and how you can make use of this OOPS characteristic inside the constructor function in JavaScript.

We will also be touching a little upon the prototype object in JavaScript. Therefore, some prior knowledge on the same is highly appreciated.

In JavaScript, inheritance is a mechanism by which an object can inherit properties and methods from another object. This can be achieved using constructor functions and the prototype property.

When creating a constructor function, you can use the prototype property to add properties and methods to the constructor function's prototype object. These properties and methods are then inherited by any objects created using the constructor function.

Example

Let us understand the same with the help of following example ?

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

In this example, the Person constructor function has a name and age property and a getName method. Any object created using the Person constructor function will have these properties and methods inherited from the prototype.

You can also create a new constructor function that inherits from an existing constructor function by using the call or apply method to call the parent constructor function and passing in this as the first argument.

Example

Following is the complete working example of inheritance at work in JavaScript ?

// Parent constructor function
function Person(name, age) {
   this.name = name;
   this.age = age;
}
// Adding a method to the prototype
Person.prototype.getName = function() {
   return this.name;
};
// Child constructor function
function Employee(name, age, company) {
   
   // Calling the parent constructor function
   Person.call(this, name, age);
   this.company = company;
}
// Setting the prototype of the child constructor function
Employee.prototype = Object.create(Person.prototype);
Employee.prototype.constructor = Employee;

// Adding a method to the child constructor function
Employee.prototype.getCompany = function() {
   return this.company;
};
const employee1 = new Employee("John", 25, "Google");
console.log(employee1.name); // "John"
console.log(employee1.age); // 25
console.log(employee1.getName()); // "John"
console.log(employee1.getCompany()); // "Google"

In this example, we have a parent constructor function called Person which takes in a name and age parameter, also it has a method called getName() which is added to the prototype of the Person constructor function. Then we have a child constructor function called Employee which inherits the properties and methods from the Person constructor function. The Employee constructor function takes in an additional company parameter and also it has a method called getCompany() which is added to the prototype of the Employee constructor function.

So, overall, in JavaScript, constructor functions can be used to create objects that inherit properties and methods from a parent object, this can be achieved by adding properties and methods to the constructor function's prototype object, or by creating a new constructor function that inherits from an existing constructor function.