PBA INSTITUTE

Inheritance in JavaScript

Inheritance is a fundamental concept in object-oriented programming (OOP) that allows a class to inherit properties and behaviors from another class. In JavaScript, inheritance enables code reusability and promotes a hierarchical structure among classes. Let's delve into the concept of inheritance in a way that's easy for a fifth-grade student to understand.

What is Inheritance?

Inheritance in JavaScript refers to the concept where a new class or object can acquire the properties and methods of an existing class or object. This allows for code reuse and the creation of hierarchical relationships between objects.

How to Use Inheritance :

Step 1 : Define the Parent Class

First, define the parent class with its properties and methods. This class will serve as the template for the child classes to inherit from.

JavaScript code

													 
class Animal {
  constructor(name) {
    this.name = name;
  }

  makeSound() {
    document.write("Animal makes a sound.");
  }
}

Step 2 : Create Child Classes

Next, create child classes that extend the parent class using the 'extends' keyword. These child classes will inherit properties and methods from the parent class and can also have their own unique properties and methods.

JavaScript code

													 
													
class Dog extends Animal {
  bark() {
    document.write(this.name + " barks.");
  }
}

class Cat extends Animal {
  meow() {
    document.write(this.name + " meows.");
  }
}
													
													
												

Step 3 : Instantiate Objects

Instantiate objects of the child classes and use their inherited methods as well as their own methods.

JavaScript code

													 
let myDog = new Dog("Buddy");
let myCat = new Cat("Whiskers");

myDog.makeSound(); // Output: Animal makes a sound.
myDog.bark();      // Output: Buddy barks.

myCat.makeSound(); // Output: Animal makes a sound.
myCat.meow();      // Output: Whiskers meows.

Example :

JavaScript code

													 
													
<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<body>
  <script type="text/javascript">
   class Animal {
  constructor(name) {
    this.name = name;
  }

  makeSound() {
    document.write("Animal makes a sound.");
  }
}

class Dog extends Animal {
  bark() {
    document.write(this.name + " barks.");
  }
}

class Cat extends Animal {
  meow() {
    document.write(this.name + " meows.");
  }
}

let myDog = new Dog("Buddy");
let myCat = new Cat("Whiskers");

myDog.makeSound(); // Output: Animal makes a sound.
myDog.bark();      // Output: Buddy barks.

myCat.makeSound(); // Output: Animal makes a sound.
myCat.meow();      // Output: Whiskers meows.

  </script>

</body>
</html>
													
													
												

In this example, 'Dog' and 'Cat' are child classes that inherit from the 'Animal' parent class. They inherit the 'name' property and 'makeSound()'' method from the 'Animal' class, and they also have their own unique methods ('bark()'' for 'Dog' and 'meow()'' for 'Cat'). When you create instances of 'Dog' and 'Cat', you can use both inherited methods and the methods specific to each subclass.

Another Example

JavaScript code

													# Write a class with following specifications:

Class name:  employee  Data members:  String name, float basic; 
Member functions:  void getdata(): to accept the name and basic pay 
Sub Class salary inherit Class employee . Data members : float da, hra, gross, net;
Member Functions:  void calculate():  to find the followings: 
da=50% of basic , hra= 10% of basic , gross= basic + da + hra, pf=8.33% of (basic+da)
net = gross – pf. void display() : to display the playslip  
													
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>inheritance</title>
</head>
<body><script type="text/javascript">
	var da,hra,gross,net,basic,name,pf;
	class employee
	{
		getdata(n,b)
		{
			name=n;
			basic=b;
		}
	}

	class salary extends employee
	{
		calculate()
		{
			da= 0.50*basic;
			hra=0.1*basic;
			gross=basic+da+hra;
			pf=0.083*basic+da;
			net=gross-pf;
		}

		display()
		{
			document.write("NAME="+ name);
			document.write("<br>");
			document.write("BASIC SALARY OF EMPLOYEE="+ basic);
			document.write("<br>");
			document.write("DA="+ da);
			document.write("<br>");
			document.write("HRA="+ hra);
			document.write("<br>");
			document.write("GROSS="+ gross);
			document.write("<br>");
			document.write("PF="+ pf);
			document.write("<br>");
			document.write("NET SALARY="+ net);
		}

	}

	ob=new salary();
	x=prompt("ENTER THE NAME OF EMPLOYEE");
	y=parseInt(prompt("ENTER THE BASIC SALARY"));
	ob.getdata(x,y);
	ob.calculate();
	ob.display();
</script>

</body>
</html>
													
													
												

Output : NAME=Rokeiya Sultana
BASIC SALARY OF EMPLOYEE=15000
DA=7500
HRA=1500
GROSS=24000
PF=8745
NET SALARY=15255

Conclusion :

Inheritance is a fundamental concept in JavaScript that enables objects to acquire properties and behaviors from other objects.

introduction user input if else loops Number Pattern array 2d array switch case Function string function Math function date time function class constructor Inheritance Regular Expression small application events Real Life

Inheritance in JavaScript

What is Inheritance?

How to Use Inheritance :

Another Example

Conclusion :

JavaScript All Chapters

SHARE