How does inheritance work in JavaScript?
Inheritance is a fundamental concept in object-oriented programming (OOP) that allows objects to inherit properties and methods from other objects. In JavaScript, inheritance is primarily achieved through prototypes. This article will delve into how inheritance works in JavaScript, explaining the concept of prototypes and how they enable objects to inherit from other objects.
Understanding Prototypes
In JavaScript, every object has a prototype. The prototype is an object that serves as a prototype for the object in question. When you create a new object, JavaScript automatically sets its prototype to the Object.prototype object, which is the root of the prototype chain. This prototype chain allows objects to inherit properties and methods from their prototypes.
Creating a Constructor Function
To create an object that can inherit properties and methods from another object, you can use a constructor function. A constructor function is a function that is used to create new objects. When a constructor function is called with the new keyword, a new object is created, and its prototype is set to the prototype of the constructor function.
Here’s an example of a constructor function called “Person”:
“`javascript
function Person(name, age) {
this.name = name;
this.age = age;
}
Person.prototype.greet = function() {
console.log(“Hello, my name is ” + this.name + ” and I am ” + this.age + ” years old.”);
};
“`
In this example, the Person constructor function creates a new object with a name and age property. The prototype of the Person object is set to the Person.prototype object, which contains a greet method.
Inheriting from a Constructor Function
To create a new object that inherits from a constructor function, you can use the extends keyword. The extends keyword allows you to specify a constructor function from which the new object will inherit properties and methods.
Here’s an example of a subclass called “Employee” that inherits from the Person constructor function:
“`javascript
function Employee(name, age, department) {
Person.call(this, name, age); // Call the constructor of the superclass
this.department = department;
}
Employee.prototype = Object.create(Person.prototype); // Set the prototype of Employee to Person.prototype
Employee.prototype.constructor = Employee; // Restore the constructor property
Employee.prototype.getDepartment = function() {
return this.department;
};
“`
In this example, the Employee constructor function inherits from the Person constructor function. The Employee object’s prototype is set to the Person.prototype object, allowing it to inherit the greet method. Additionally, the Employee object has a getDepartment method that returns the department property.
Using the Prototype Chain
When you access a property or method on an object, JavaScript will first look for the property or method in the object itself. If the property or method is not found, JavaScript will continue searching up the prototype chain until it finds the property or method.
Here’s an example of using the prototype chain to access a property:
“`javascript
let employee = new Employee(“John”, 30, “IT”);
console.log(employee.name); // Output: John
console.log(employee.greet()); // Output: Hello, my name is John and I am 30 years old.
console.log(employee.getDepartment()); // Output: IT
“`
In this example, the name property is found in the employee object itself. The greet method is found in the Employee.prototype, which is linked to the Person.prototype. Finally, the getDepartment method is found in the Employee.prototype.
Conclusion
Inheritance in JavaScript is achieved through prototypes, allowing objects to inherit properties and methods from other objects. By using constructor functions and the extends keyword, you can create subclasses that inherit from other classes. Understanding how inheritance works in JavaScript is essential for writing efficient and maintainable code.
