In this section, we will learn what the Class Inheritance is and how to use it in JavaScript.
Note: we’re assuming you’re already familiar with JavaScript classes.
What is Inheritance?
Inheritance is the idea of using the members of one class for another class without re-declaring those members in the second class.
Take it this way: There’s an engineer and wants to build a house. She designs the house, creates the necessary maps and blueprints, and then proceeds to the construction process.
Later on, someone asked her to build another house that 90% looks like the one she built before and only 10% modifications is needed.
At this time, the right procedure would be to use the old blueprints for the 90% of the project and only modify the 10% differences.
This is called inheritance!
Instead of going through all the works from ground zero, we use the works that are already done.
JavaScript Class Inheritance
In JavaScript programs also, it happens many times that we create a class that its members can be used for other classes and so instead of copying members in each class, a class can inherit from another one and use its members instead.
This way, only in one place we create the class members and if in the future there was a need to modify the body of a class, the modification will be only in one place.
Related Terminology to Inheritance in JavaScript
When it comes to inheritance, there are a set of terminologies that we need to be familiar with because we’ll hear them a lot from other sources as well as between developers.
– JavaScript Super class (Base class| Parent class):
This is the class that other classes inherit from its members.
– JavaScript Subclass (Child class):
This is the class that inherits from another class and basically uses its members.
– JavaScript Reusability:
The inheritance in programming is a method of code reusability. Basically, by writing a source code in one place and then using it in other places as well, we’re reusing the source code which saves time and makes the process of creating a program a lot faster.
Extend in JavaScript (JavaScript Extend Class)
In JavaScript, to inherit one class from another one, we use the `extends` keyword.
JavaScript extends Keyword Syntax:
class ChildClass extends ParentClass{
//body…
}
Inheritance Example in JavaScript:
class Employee {
constructor(){
this.name = "John";
this.lastName = "Doe";
}
getName() {
return this.name;
}
setName(name) {
this.name = name;
}
getLastName() {
return this.lastName;
}
setLastName(lastName) {
this.lastName = lastName;
}
}
class Manager extends Employee{
}
const emp = new Manager();
console.log(emp.getName() , emp.getLastName());
Output:
Jon Doe
How does Inheritance work in JavaScript?
So here the `Employee` class is the `parent` or `base` class and the `Manager` class is the `child` or `derived` one.
The `Manager` class in this example does not have any member on its own! But still you can see we’ve created an object from this class and could call two methods `getName()` and `getLastName()`.
This is the result of inheritance. Basically, the execution engine first looks into the newly created object to see if there are two properties (methods) with these names. But because there are no such properties, it will look into the prototype of the `Manager` class.
Note: the members that we create outside of the `constructor` method of a class are considered part of the prototype of that class.
But because in the prototype also there are no members with these names, the execution engine uses the created a link between the `Manager` and the `Employee` class to move into the body of this base class.
Here the two methods are there and so the engine will invoke their body and that’s how we got the values `John` and `Doe` on the browser’s console.
Notes:
- A class can only inherit (extends) to one class! This means the declaration below is illegal and error prone:
class Manager extends Employee, SecondClass{
}
- When we create an object from a subclass, all the members of the child and the ancestor classes (all the classes in the chain of inheritance that are above the subclass (check the note below)) will be instantiated.
The instantiation happens from top to bottom. In the example above, the compiler first checks the members of the `Employee` class to see what property it can find and instantiate and then it moves to the `Manager` class and looks for properties to instantiate them as well. This is an important topic and we’ll cover it in the inheritance and constructor section.
JavaScript Multiple different class inherit from one class
One class can become the parent of multiple other classes in JavaScript.
This means if we have a class named A, that can be the parent of other classes like hypothetically B, C, and D, etc.
Example: using one class as the parent of other classes in JavaScript
class A{..}
class B extends A{…}
class C extends A{…}
class D extends A{…}
JavaScript Hierarchical Inheritance
A parent class can itself be the child of another class! For example, if we have 3 classes named A, B and C, then A can be the parent of the B and the class B can be the parent of the class C. In this case the class B is the parent of the C as well as the sub-class of the A class.
Example: Hierarchical Inheritance in JavaScript
class A{..}
class B extends A{…}
class C extends B{…}
In this case, the class B has the access to all the members of the class A. Also the class C has the access to members of the class B as well as class A. This means a child class is linked to a chain of classes and the members of all the ancestor classes (those above the child class) are accessible in the child class as well.
Note: other than the members that a child class can inherit from its parent, the child class can also define its own members as well.
Example: JavaScript Inheritance Child Class with its own methods
class Employee {
constructor(){
this.name = "John";
this.lastName = "Doe";
}
getName() {
return this.name;
}
setName(name) {
this.name = name;
}
getLastName() {
return this.lastName;
}
setLastName(lastName) {
this.lastName = lastName;
}
}
class Middle{}
class Manager extends Employee{
constructor(email){
super();
this.email = email;
}
getEmail(){
return this.email;
}
setEmail(email){
this.email = email;
}
}
const emp = new Manager("[email protected]");
console.log(emp.getName() , emp.getLastName(), emp.getEmail());
Output:
John Doe [email protected]
Note: the use of `super()` will be explained in the JavaScript super keyword section.
Here the `Manager` class has 2 methods and one property on its own, also it has the access to the members that it inherits from the `Employee` class.
