What is an inheritance ?
The thing that is inherited from other is called inheritance.
What is inheritance in javascript ?
Inheritance is a mechanism by which one class is allowed to inherit the fields and methods of another class.
A child class can reuse the methods and variables of the parent class.
Why is inheritance used in javascript ?
Inheritance allows us to reuse the code, and improves the re-usability of code.
We can create new classes that are built upon existing classes.
When you inherit from an existing class, we can reuse methods and fields of parent class.
Also we can add new methods and fields too.
Inheritance is also known as parent-child relationship.
How to use inheritance in javascript ?
The “extends” keyword is used to create a child class based on a parent class.
By which newly created child class to acquire all the properties and behaviour of the parent class.
Inheritance can be explained in two ways.
1. Inheriting Javascript inbuilt object.
2. Inheriting properties from the parent class.
Javascript coding basics !!!
Click to Learn More about – Javascript online learning
1. Inheriting Javascript inbuilt object.
Suppose we have a parent class which inherits javascript built-in object “Date”.
Example 1 :
<script>
class parentClass extends Date{
constructor(){
super();
}
}
var a = new parentClass();
document.writeln("Todays Date = "+a.getDate()+ "<br/>");
document.writeln("This Month = "+a.getMonth()+"<br/>");
document.writeln("This Year = " +a.getFullYear()+"<br/>");
document.writeln("Combined form = " + a.getDate() + " - " + a.getMonth() + " - " + a.getFullYear());
</script>
Output :
Example 2 :
<script>
class parentClass extends Date{
constructor(year){
super(year);
}
}
var a = new parentClass("October 24, 2018 21:24:33");
document.writeln("Get Year = " +a.getFullYear()+"<br/>");
document.writeln("Get Month = " +a.getMonth()+"<br/>");
document.writeln("Get Date = " +a.getDate()+"<br/>");
document.writeln("Get Time in Milliseconds = " +a.getTime()+"<br/>");
</script>
Output :
2. Inheriting properties from the parent class.
Example :
<script>
class Marks{
constructor(){
this.englishmark = "100";
this.tamilmark = "98";
this.mathsmark = "100";
this.sciencemark = "98";
this.historymark = "89";
this.geographymark = "100";
}
}
class StudentInfo extends Marks{
constructor(name,age,address){
super();
this.name = name;
this.age = age;
this.address = address;
}
}
var a = new StudentInfo("Abdul","14","Chennai");
document.writeln("Name = " +a.name+"<br/>");
document.writeln("Age = " +a.age+"<br/>");
document.writeln("Address = " +a.address+"<br/>");
document.writeln("English Mark = " +a.englishmark+"<br/>");
document.writeln("Tamil Mark = " +a.tamilmark+"<br/>");
document.writeln("Maths Mark = " +a.mathsmark+"<br/>");
document.writeln("Science Mark = " +a.scienncemark+"<br/>");
document.writeln("History Mark = " +a.historymark+"<br/>");
document.writeln("Geography Mark = " +a.geographymark+"<br/>");
</script>
Output :
