How does inheritance in constructors work in JavaScript?

In this article, we will discuss how inheritance works in JavaScript and how to leverage this object-oriented programming feature in JavaScript’s constructor.

We will also briefly introduce prototype objects in JavaScript. So some prior understanding of this would be much appreciated.

In JavaScript, inheritance is a mechanism by which one object can inherit properties and methods from another object. This can be achieved by using constructors and prototype properties.

When you create a constructor, you can use prototype properties to add properties and methods to the constructor's prototype object. Any objects created using the constructor then inherit these properties and methods.

Example

Let us understand through the following examples:

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

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

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

Example

Here is a complete example of inheritance working 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 called Person, which accepts a name and age parameters, and it has a method called getName(), which is added to the prototype of the Person constructor. Then we have a child constructor called Employee, which inherits the properties and methods of the Person constructor. The Employee constructor accepts an additional company parameter, and it has a method called getCompany(), which is added to the prototype of the Employee constructor.

So, in JavaScript, a constructor can be used to create an object that inherits properties and methods from a parent object, either by adding properties and methods to the constructor's prototype object, or by creating an object that inherits from an existing constructor. The new constructor is implemented.

The above is the detailed content of How does inheritance in constructors work in JavaScript?. For more information, please follow other related articles on the PHP Chinese website!