Let's learn inheritance in JavaScript. JavaScript is a class-free, object-oriented language, and as such, it uses prototypical inheritance instead of classical inheritance. JavaScript's prototypical inheritance has more expressive power than classical inheritance.
Why we need Inheritance in JavaScript?
The first reason is type convenience. We want the language system to automatically cast references of similar classes. Little type-safety is obtained from a type system which requires the routine explicit casting of object references. This is of critical importance in strongly-typed languages, but it is irrelevant in loosely-typed languages like JavaScript, where object references never need casting.
The second reason is code reuse. It is very common to have a quantity of objects all implementing exactly the same methods. Classes make it possible to create them all from a single set of definitions. It is also common to have objects that are similar to some other objects, but differing only in the addition or modification of a small number of methods. Classical inheritance is useful for this but prototypical inheritance is even more useful.
Why we need Inheritance in JavaScript?
The first reason is type convenience. We want the language system to automatically cast references of similar classes. Little type-safety is obtained from a type system which requires the routine explicit casting of object references. This is of critical importance in strongly-typed languages, but it is irrelevant in loosely-typed languages like JavaScript, where object references never need casting.
The second reason is code reuse. It is very common to have a quantity of objects all implementing exactly the same methods. Classes make it possible to create them all from a single set of definitions. It is also common to have objects that are similar to some other objects, but differing only in the addition or modification of a small number of methods. Classical inheritance is useful for this but prototypical inheritance is even more useful.
Inheritance in JavaScript
Inheritance is the way to create a class as a specialized version of one or more classes. The specialized class is called the super class or base class and the class that gets properties and functions from a specialized class is called a sub-class. In modern browsers we can also use Object.create to implement inheritance. Have a look at the following code.<%@ Page Language="C#" AutoEventWireup="true"CodeBehind="JavaScript.aspx.cs" Inherits="JavaScript.JavaScript" %><!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
</head>
<body> <form id="form1" runat="server"> <script>
function person(name) {
this.name = name; }
person.prototype.SayName = function () {
alert("I am " + this.name); }
function student(name) {
this.name = name; }
//Inherit the property of parent class student.prototype = person.prototype;
var s = new student('Sourav Kayal');
s.SayName();
</script> </form>
</body></html>
As we said earlier, there is no class in JavaScript. And if we want to implement a class we need to use a function. Here we will inherit one function from another. At first we are defining the following function:function person(name) {
this.name = name;}
The function contains only one property called "name". When we create an object of this class we need to pass a name argument to it.
Then, we are setting a property into it. The property is nothing but the elements that can be inherited by another class. The function name is SayHello and it will be inherited by the next class.person.prototype.SayName = function () {
alert("I am " + this.name);}
Now, we are defining the student class, and will inherit the person class for it. Here is the implementation of the student class. It also contains a name property. function student(name) {
this.name = name;}Now, we have defined both a base and a derived class. It's time to inherit one from another. We need to set one class property to another to inherit the common property. This is code to share the property.//Inherit the property of parent classstudent.prototype = person.prototype;
We will now create an object of the student class by passing the student name and then we will call the SayName() function to print the student name.var s = new student('Sourav Kayal');
s.SayName();
Here is sample output:
The code is calling the SayName() function defined in the person class, not in the student class.
This is the example of single inheritance. We will now try to implement multi-level inheritance. Have a look at the following code.<%@ Page Language="C#" AutoEventWireup="true"CodeBehind="JavaScript.aspx.cs" Inherits="JavaScript.JavaScript" %><!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
</head>
<body> <form id="form1" runat="server"> <script>
function father(name) {
this.name = name;
}
father.prototype.SayName = function () {
alert("Name is:- " + this.name);
}
function mother(name) {
this.name = name;
}
function son(name) {
this.name = name; }
mother.prototype = father.prototype;
son.prototype = mother.prototype;
var s = new son('Sourav Kayal');
s.SayName();
</script> </form>
</body>
</html>
The code above is very similar to the first example. We are creating an object of the son class and using the SayHello() function of the father class.
Conclusion
In this article we saw how to implement the inheritance concept in JavaScript. Follow this series to understand more of the concepts of JavaScript.
Inheritance is the way to create a class as a specialized version of one or more classes. The specialized class is called the super class or base class and the class that gets properties and functions from a specialized class is called a sub-class. In modern browsers we can also use Object.create to implement inheritance. Have a look at the following code.<%@ Page Language="C#" AutoEventWireup="true"CodeBehind="JavaScript.aspx.cs" Inherits="JavaScript.JavaScript" %><!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
</head>
<body> <form id="form1" runat="server"> <script>
function person(name) {
this.name = name; }
person.prototype.SayName = function () {
alert("I am " + this.name); }
function student(name) {
this.name = name; }
//Inherit the property of parent class student.prototype = person.prototype;
var s = new student('Sourav Kayal');
s.SayName();
</script> </form>
</body></html>
As we said earlier, there is no class in JavaScript. And if we want to implement a class we need to use a function. Here we will inherit one function from another. At first we are defining the following function:function person(name) {
this.name = name;}
The function contains only one property called "name". When we create an object of this class we need to pass a name argument to it.
Then, we are setting a property into it. The property is nothing but the elements that can be inherited by another class. The function name is SayHello and it will be inherited by the next class.person.prototype.SayName = function () {
alert("I am " + this.name);}
Now, we are defining the student class, and will inherit the person class for it. Here is the implementation of the student class. It also contains a name property. function student(name) {
this.name = name;}Now, we have defined both a base and a derived class. It's time to inherit one from another. We need to set one class property to another to inherit the common property. This is code to share the property.//Inherit the property of parent classstudent.prototype = person.prototype;
We will now create an object of the student class by passing the student name and then we will call the SayName() function to print the student name.var s = new student('Sourav Kayal');
s.SayName();
Here is sample output:
The code is calling the SayName() function defined in the person class, not in the student class.
This is the example of single inheritance. We will now try to implement multi-level inheritance. Have a look at the following code.<%@ Page Language="C#" AutoEventWireup="true"CodeBehind="JavaScript.aspx.cs" Inherits="JavaScript.JavaScript" %><!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
</head>
<body> <form id="form1" runat="server"> <script>
function father(name) {
this.name = name;
}
father.prototype.SayName = function () {
alert("Name is:- " + this.name);
}
function mother(name) {
this.name = name;
}
function son(name) {
this.name = name; }
mother.prototype = father.prototype;
son.prototype = mother.prototype;
var s = new son('Sourav Kayal');
s.SayName();
</script> </form>
</body>
</html>
The code above is very similar to the first example. We are creating an object of the son class and using the SayHello() function of the father class.
Conclusion
In this article we saw how to implement the inheritance concept in JavaScript. Follow this series to understand more of the concepts of JavaScript.