Inheritance:
Inheritance refers to the act of inheriting something. It could be a child
inheriting the property of their parents or a new species inheriting some
property of the older species during evolution. In the above-mentioned examples,
the latter entity is inheriting the properties of the previous entity. Also, we
can observe that the latter entity has some functionalities that either weren't
present in the previous one or their execution has been improvised.
JavaScript Class Inheritance:
JavaScript Class Inheritance enables you to define a class that takes all the
functionality from a parent class and allows you to add more. Using class
inheritance, a class can inherit all the methods and properties of another
class.Inheritance is a useful feature that allows code reusability.
The inheritance in javascript primarily involves two segments:
1) Child class: The class which inherits the properties of another class is known
as the child class.
2) Parent class: The class whose property is being inherited is
known as the parent class.
How to create inheritance between classes ?
The extends keyword is used for developing the inheritance between two classes.
Example:
//parent class
class Animals{
constructor(name){
this.name = name;
}
animalName(){
return `${this.name}`;
}
walk(){
console.log(`Animal ${this.name} is walking`)
}
}
//Pets extending the parent class
class Pets extends Animals{
constructor(name,species){
super(name);//calls base class constructor
this.species= species;
console.log(`Pet class is created`);
}
walk(){
console.log(`Pet ${this.name} is walking`)
}
speciesName(){
return `${species}`;
}
PetWalk(){
super.walk()
}
}
let petsObject = new Pets("Sheru");
let petName = petsObject.animalName();
console.log(`Pet Name:${petName}`)
petsObject.walk()
petsObject.PetWalk()
Output:
Pet class is created
Pet Name:Sheru
Pet Sheru is walking
Animal Sheru is walking
Here "Animals" is parent class or base class while "Pets" is child class or
derived class. The "Pets" class inherits all the methods and properties of the
"Animals" class. Hence, the "Animals class will now have the "name" property and
the animalName() method.
super() keyword:
The super keyword in javascript is used to call functions of an object's parent
class. When the constructor of "Pets" class is called, it also calls the
constructor of the "Animals" class which assigns a name property to it.
We are calling super.walk() from PetWalk() method of Pets class as we want to use
parent class implementation of walk() method.
Overriding Method or Property:
If a child class has the same method or property name as that of the parent
class, it will use the method and property of the child class.
Overriding constructor:
When we inherit a parent class without declaring the constructor of the child
class, by default, javascript creates the following empty constructor.when we
are adding our own constructor definition in the child class, it is known as
constructor overriding.It is necessary to pass the attributes of the parent
class with the super keyword while overriding the constructor.
W.r.t. previous code the Pets class is inheriting the Animals class. We have
overridden the constructor method of Animals by defining a new constructor in
the Pets class.
Function/Method Overloading:
Function overloading means basically creating multiple functions with same name
but different signature,that means either their input parameters are different
or return type is different.
In Normal code function overloading is not supported.Consider following code.
Example:
function displayName(name) {
return `Hi ${name}`;
}
function displayName(fName, lName) {
return `Hi ${fName} ${lName}`;
}
let result = displayName('Ana');
console.log(result)
Output:
Hi Ana undefined
Here we are defining "displayName" function twice.The last declartion of
"displayName" function will override the first declaration of function. Function
declarations in JavaScript are hoisted to the top of the enclosing function or
global scope.
Method Overloading in javascript classes:
Consider following code
class Parrot {
constructor(name) {
this.name = name;
}
talk() {
console.log(`Parror ${this.name} speak mithoo mithoo`);
}
talk(taughtMessage) {
console.log(`Parror ${this.name} speak ${taughtMessage}`);
}
}
let parrotObject = new Parrot('Hira');
parrotObject.talk();
parrotObject.talk('How Are You');
Output:
Parror Hira speak undefined
Parror Hira speak How Are You
Here two methods written with same name "talk" but different parameter.
But when we call method only last one get called.Hence call to
parrotObject.talk() is without param and it calls following method
talk(taughtMessage) {
console.log(`Parror ${this.name} speak ${taughtMessage}`);
}
It found "taughtMessage" variable is not passed so it is printed as undefined.
W.r.t. code earlier walk() method is first present in parent class "Animals".
It has been overriden in child class "Pets".In sense we have recreated same
function with same parameter but different implementation.when we call
petsObject.walk() the child class method is called rather than parent class.
if child class does'not have walk() method overridden then it would have called
parent class walk() method.
Inheriting static members:
The static attributes and methods of the parent class are also inherited during
inheritance in javascript. The inheriting static members in javascript belong to
the class and are not part of the instantiated object.
Example:
class car {
constructor(color) {
this.color = color;
}
display() {
console.log(`This car is ${this.color} in color`);
}
static greet() {
console.log('Welcome!');
}
}
class Skoda extends Car {
modelName(){
console.log(`This is a Skoda`);
}
}
Skoda.greet(); // Welcome!
Inheriting from built-in types:
Inheritance in javascript allows us to inherit non-primitive built-in types in
javascript such as array, set, map etc.
Example:
class Queue extends Array {
enqueue(e) {
super.push(e);
}
dequeue() {
return super.shift();
}
peek() {
return !this.empty() ? this[0] : undefined;
}
empty() {
return this.length === 0;
}
}
let students = new Queue();
students.enqueue('Jon');
students.enqueue('Peter');
students.enqueue('Loki');
console.log(students.pop()); // Loki
Uses of Inheritance
1) Since a child class can inherit all the functionalities of the parent's
class, this allows code reusability.
2) Once a functionality is developed, you can simply inherit it. No need to
reinvent the wheel. This allows for cleaner code and easier to maintain.
3) Since you can also add your own functionalities in the child class, you can
inherit only the useful functionalities and define other required features.
No comments:
Post a Comment