Introduction to Inheritance in JavaScript
The following article provides an outline on Inheritance in JavaScript. Inheritance is a concept in object-oriented language where a class inherits or extends the property or behavior of another class. Inheritance concept helps in reusing the fields and methods of the class that is inherited or extended. This helps in code reusability and avoidance of code repetition (redundant code). Inheritance represents parent-child relationship between the base class and derived class. In object-oriented languages, there is class-based language, such as Java, C++, etc., and there is prototypal language such as JavaScript. In class-based object-oriented language the class are the blueprints and by using these blueprints we create object so as to use them, whereas in prototypal object-oriented language we create objects and then use them as a prototype to create other objects.
Inheritance – JS: Prototypal Inheritance
In JavaScript, inheritance is implemented by using prototype object. This is sometimes referred as either “Prototypal Inheritance” or “Behavior Delegation”.
Below diagram represents the way how inheritance works in Java vs how the inheritance works in JavaScript respectively.
v1, v2 are the instances of Vehicle (base / parent class). c1, c2 are instances of Car (derived / child class). In JavaScript, when we create an object, it creates a link instead of copying behaviors or properties that usually happens in object-oriented programming languages such as Java. In Java, the parent-child class are separate entities where the properties / behaviors of parent class (Vehicle) is copied into child class (Car), whereas in JavaScript a link is created between them, also referred as prototype chain.
Similar kind of linkage gets created in case of inheritance of class as well. This pattern is called Behavior Delegation Pattern which is commonly referred as prototypal inheritance in JavaScript. Since a copy is created in Java, all arrows are drawn downwards (properties and behaviors flowing down) whereas, in JavaScript flow is upwards.
Examples of Inheritance in JavaScript
Given below are the examples:
Example #1
Code:
<!DOCTYPE HTML>
<html>
<head>
<title> Inheritance in JS </title>
</head>
<body>
<script>
//Parent / Base Class
function Employee(firstName, lastName) {
this.FirstName = firstName || "unknown";
this.LastName = lastName || "unknown";
}
//Parent class Method
Employee.prototype.getName = function () {
return this.FirstName + " " + this.LastName;
}
//Child / Derived Class
function Manager(firstName, lastName, level, rating)
{
Employee.call(this, firstName, lastName);
this. level = level || "unknown";
this. rating = rating || 0;
}
// Child Class Inheriting Parent Class
Manager.prototype = new Employee ();
Manager.prototype.constructor = Manager;
//Created object of Child class
var manager = new Manager ("Panos","Dsouza", "GCM 4", 5);
// Output Generation
console.log ("Full Name : " ,manager.getName());
console.log ("Level : ",manager.level)
console.log ("Rating : ",manager.rating)
console.log (manager instanceof Manager);
console.log (manager instanceof Employee);
</script>
</body>
</html>
4.5 (5,448 ratings)
View Course
Output:
Explanation:
- In the above example, we have defined Employee class (function) with FirstName & LastName properties and added getName method to its prototype object.
- Then we have createdManager class that inherits from Employee class, using FirstName, LastNameproperties and getName() method defined in Employee class, thus avoiding redefinition of these properties, hence establishing inheritance relationship.
- In prototypal inheritance, the fields or methods that are attached to object’s prototype, become available to that objects and its descendants. It is important to understand prototype chain and its working to fully grasp the inheritance concept in JavaScript. Even when we use keywords class and extend to implement inheritance in JavaScript, it still follows prototypal inheritance.
Example #2
Code:
<!DOCTYPE HTML>
<html>
<head>
<title> Inheritance in JS </title>
</head>
<body>
<script>
class Employee {
constructor(firstName,lastName){
this.FirstName = firstName;
this.LastName = lastName;
}
getName() {
return this.FirstName + " " + this.LastName;
}
}
class Manager extends Employee {
constructor(firstName,lastName,level,rating) {
super(firstName,lastName);
this.FirstName = firstName;
this.LastName = lastName;
this.level = level;
this.rating = rating;
}
}
let emp = new Employee()
console.log("Before Assignment")
console.log(emp.getName())
let mng = new Manager("Manoj","Khanna","GCM5",5);
console.log("After Assignment")
console.log(mng.getName())
</script>
</body>
</html>
Output:
Explanation:
- The super() method calls the Employee class (parent class) constructor and assigns the respective values to the fields defined in the Employee class i.e. FirstName and LastName. The mng object of class Manager which extends Employee class has access to all its methods and fields and can use them to get the desired result.
- We have seen how prototypal inheritance differs from classical / class-based inheritance and how JavaScript implements it with the examples above.
Conclusion
Inheritance helps us to achieve cleaner and reusable code thereby saving memory on repetition of object property and method definition. It helps us to add newer functionality or features on already pre-existing functionality and features.Therefore, we can define inheritance” as an extension, where a child / derived class extends a parent class / base class by adding or overriding its properties or behaviors.
Recommended Articles
This is a guide to Inheritance in JavaScript. Here we discuss the introduction, inheritance – JS: prototypal inheritance and examples. You may also have a look at the following articles to learn more –
