Advanced JavaScript: Implement Inheritance in JavaScript

Introduction

This is the "Advanced JavaScript" article series. In this series, we are learning a few advanced and interesting concepts of JavaScript. So far we have explained various important concepts of this programming language. You can get them here.

In this article, we will learn one more OOP concept of JavaScript called inheritance. As we have explained, JavaScript is an Object Oriented Programming language but is class-less. In other words, there is no concept of a class in JavaScript but we can implement a class by functions and objects. So, let's see how to implement the inheritance concept in JavaScript.

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 superclass or base class and the class that gets properties and functions from a specialized class is called a subclass. 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>

Let's try to understand it. 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's 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 class
student.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 a 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.

2 Comments

Join the conversation! Your thoughts help the community grow.

Sourav Kayal12y ago
In prototype property of person class(in JavaScript it's function) we are attaching one property called SayName which will contain one anonymous function.
Former member12y ago
hi go through the article but do not understand the role of this line of code. person.prototype.SayName = function () { alert("I am " this.name); } please tell me what is the meaning of this line. thanks