Inheritance in JavaScript

By
Alimam Miya
-

Hello everyone, welcome back. In this module, I will be discussing Inheritance in JavaScript. It is mandatory to know about classes in JavaScript before knowing about inheritance, so you can read the previous module for this if you don’t know about JavaScript classes. Now, let’s begin to discuss inheritance.

Inheritance in JavaScript

Inheritance in JavaScript

Like other programming languages like Python, C++, Java, etc. inheritance is an important concept of Object-Oriented Programming (OOPs). Inheritance in JavaScript is the capability of one class to inherit or use the properties or attributes & methods of another class. It is used to maintain the IS-A relationship.

The class which inherits the properties & behaviors of another class is a derived class or subclass or child class & the class whose properties & behaviors are inherited is called parent class or base class or superclass. It offers flexibility to the child class to reuse the variables & methods of a parent or base class.

In modern JavaScript or ES6, also known as ECMAScript 2015 (ES 2015), a class can inherit another class properties & methods by using extended keywords in class expressions or class declarations. Using extends keyword in JavaScript, all the variables and methods of the built-in object, as well as the custom classes, may be acquired or reused. A prototype object may also be used to achieve inheritance in JavaScript.

Syntax
class ParentClass {
constructor() {
// body
}
method1(){}
method2(){}
…..
}

class ChildClass extends ParentClass{
constructor() {
// body
}
method1(){}
method2(){}
…..
}

Let’s see the different methods for achieving inheritance in JavaScript.

Using class declaration in JavaScript

<!DOCTYPE html>
<html>
<body>
<h2>Inheritance in JavaScript</h2>
<script>
class Person
{
  // constructor function
  constructor(name,age,gender)
  {
    this.name=name;
    this.age=age;
    this.gender=gender;
  }
}

// Inheriting variables & methods of Person class
class Student extends Person {
  // child class constructor
  constructor(name,age,gender,education,percentage) {
    super(name,age,gender);
    this.education=education;
    this.percentage=percentage;
  }
  show(){
    document.writeln("<p>Name:",this.name,"</p>");
    document.writeln("<p>Age:",this.age,"</p>");
    document.writeln("<p>Gender:",this.gender,"</p>");
    document.writeln("<p>Education:",this.education,"</p>");
    document.writeln("<p>Percentage:",this.percentage+" % </p>");
    document.write('<hr/>');
  }
}
document.writeln("<h2>Student Details</h2>");
// creating objects of Student Class
var karan=new Student("Karan Sharma",23,'Male',"MCA",83);
var simran=new Student("Simran Singh",21,'Female',"BCA",76);
var piyush=new Student("Piyush Gupta",22,'Male',"B.Tech",78);
var pallavi=new Student("Pallavi Shukla",24,'Female',"BSC",81);

// Calling show() method using Student Class
karan.show();
simran.show();
piyush.show();
pallavi.show();
</script>
</body>
</html>

In the above example, the person is a parent or base class & the Student is a child or subclass. We have used the super() method to call the constructor of the parent class.

Using JavaScript inbuilt object in JavaScript

<!DOCTYPE html>
<html>
<body>
<h2>Inheritance in JavaScript</h2>
<script>
   class DemoClass extends Date {
   constructor(date) {
   super(date);
   }
}
var obj = new DemoClass("October 15, 2021");
document.writeln(' Date: ', obj.getDate(),'/ ', obj.getMonth(),'/ ', obj.getFullYear());
</script>
</body>
</html>

//Output
//Date: 15/9/2021

Using prototype-based approach in JavaScript

The inheritance is performed in several phases in prototype-based inheritance.

<!DOCTYPE html>
<html>
<body>
<h2>Inheritance in JavaScript</h2>
<script>
  //Constructor function
  function Person(name,age,gender)
  {
    this.name=name;
    this.age=age;
    this.gender=gender;
  }
Person.prototype.show=function()
{
  document.writeln(`<p>Name: ${this.name}</p>`);
  document.writeln(`<p>Age: ${this.age}</p>`);
  document.writeln(`<p>Gender: ${this.gender}</p>`);
}

//Another constructor function
function Student(education,percentage) {
  this.education=education;
  this.percentage=percentage;
}
var obj1 = new Person("Rahul Kesharwani",21,"Male");
var obj2 = new Person("Sneha Verma",22,"Female");

// Now Person is treated as a parent class of Student.
Student.prototype=obj1;
Student.prototype=obj2;

var obj3=new Student("B.Tech",75);
obj3.show();
document.writeln(`<p>Education: ${obj3.education}</p>`);
document.writeln(`<p>Percentage: ${obj3.percentage}%</p>`);

var obj4=new Student("BSC",80);
obj4.show();
document.writeln(`<p>Education: ${obj3.education}</p>`);
document.writeln(`<p>Percentage: ${obj3.percentage}%</p>`);

</script>
</body>
</html>

Hoisting in Classes in JavaScript

Class declarations are not hoisted, unlike functions and variables in JavaScript declarations.

var obj = new Employee("Aditya Singh",33);

class Employee {
  constructor(name,age) {
    this.name = name;
    this.age = age;
  }
}

The above JavaScript code will throw an error: Uncaught ReferenceError: Cannot access ‘Employee’ before initialization.

The correct way is given below:

class Employee {
  constructor(name,age) {
    this.name = name;
    this.age = age;
  }
}
var obj = new Employee("Aditya Singh",33);

I hope this module will be beneficial for you and now you have got a good knowledge of inheritance in JavaScript. In the next module, I will be discussing the difference between ES5 and ES2015, until then keep coding.