JavaScript Inheritance
Inheritance lets a new class reuse properties and methods of an existing class. JavaScript uses the extends keyword and super() to set up parent–child relationships between classes.
What is Inheritance?
Inheritance is an Object Oriented concept where one class (the child) inherits properties and methods of another class (the parent). It promotes reuse and keeps your code DRY (Don't Repeat Yourself).
Types of Inheritance
Single
One child inherits from one parent (most common).
Multi-level
Child → Parent → Grandparent chain.
Hierarchical
Many children inherit from a single parent.
Mixin-based
Combine behaviour from multiple objects.
Method Override
Child redefines a parent method.
Method Reuse
Use super.method() to call parent version.
Basic Features
- Use
extendsto set the parent class. - Call
super(args)inside child constructor before usingthis. - Child can override methods of the parent.
- Use
super.method()to still access the parent version.
Inheritance in JavaScript
Inheritance is a fundamental concept of object-oriented programming that allows one class to inherit properties and methods from another class. It promotes code reusability and hierarchical relationships.
What is Inheritance ?
Inheritance in JavaScript allows a child class to acquire the properties and methods of a parent class using the extends keyword.
Inheritance Syntax
class Parent{
greet(){
return
"Hello from Parent";
}
}
class Child
extends Parent{
greet(){
return
super.greet()
+ " and Child";
}
}
new Child().greet();
Step 1 : Parent Class
First create a parent class containing common properties and methods.
class Animal{
constructor(name){
this.name =
name;
}
makeSound(){
document.write(
"Animal makes a sound."
);
}
}
Step 2 : Child Classes
Create child classes using the extends keyword so they inherit the parent class.
class Dog
extends Animal{
bark(){
document.write(
this.name +
" barks."
);
}
}
class Cat
extends Animal{
meow(){
document.write(
this.name +
" meows."
);
}
}
Step 3 : Create Objects
Create objects of child classes and use inherited methods as well as child-specific methods.
let myDog = new Dog( "Buddy" ); let myCat = new Cat( "Whiskers" ); myDog.makeSound(); myDog.bark(); myCat.makeSound(); myCat.meow();
Your First Inheritance Program
<script>
class Animal{
constructor(name){
this.name =
name;
}
sound(){
return
this.name +
" makes a sound";
}
}
class Dog
extends Animal{
bark(){
return
this.name +
" barks!";
}
}
let d =
new Dog(
"Rocky"
);
document.write(
d.sound()
+ "<br>"
);
document.write(
d.bark()
);
</script>
Rocky barks!
Example 1 : super()
<script>
class Vehicle{
constructor(brand){
this.brand =
brand;
}
}
class Car
extends Vehicle{
constructor(
brand,
model
){
super(brand);
this.model =
model;
}
show(){
document.write(
this.brand +
" - " +
this.model
);
}
}
new Car(
"Honda",
"City"
).show();
</script>
Example 2 : Method Override
<script>
class Shape{
area(){
return 0;
}
}
class Square
extends Shape{
constructor(side){
super();
this.side =
side;
}
area(){
return
this.side *
this.side;
}
}
document.write(
new Square(5)
.area()
);
</script>
Example 3 : Multi-Level Inheritance
<script>
class A{
hello(){
return "A";
}
}
class B
extends A{
hi(){
return "B";
}
}
class C
extends B{
hey(){
return "C";
}
}
let obj =
new C();
document.write(
obj.hello()
+
obj.hi()
+
obj.hey()
);
</script>
Example 4 : Employee Salary System
<script>
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="
+basic
);
document.write(
"<br>"
);
document.write(
"NET="
+net
);
}
}
ob =
new Salary();
ob.getdata(
"Rokeiya",
15000
);
ob.calculate();
ob.display();
</script>
BASIC = 15000
NET = 15255
Example 5 : super.method()
<script>
class Person{
intro(){
return
"I am a person";
}
}
class Student
extends Person{
intro(){
return
super.intro()
+
" and a student";
}
}
document.write(
new Student()
.intro()
);
</script>
Important Notes
- A class can extend only one parent class.
- Always call super() first in child constructors.
- Child methods override parent methods automatically.
- Inheritance supports code reusability.
Real-Life Use Cases
Vehicles
Car, Bike and Truck inherit Vehicle.
Users
Admin and Customer inherit User.
Games
Enemy and Player systems.
Frequently Asked Questions
| Question | Answer |
|---|---|
| Can JavaScript support multiple inheritance? | No, only single inheritance is supported directly. |
| Why is super() important? | It initializes parent class properties. |
| Can child classes add new methods? | Yes, child classes can define additional methods. |
Conclusion
Inheritance is one of the most powerful OOP concepts that helps developers create reusable, organized, and scalable JavaScript applications.
JavaScript All Chapters
Continue Learning
Previous
Go to Constructor Chapter