How to call a parent method from child class in JavaScript?
Last Updated :
15 Jul, 2025
Inheritance in programming allows a class to derive methods and properties from another class, similar to how a child inherits traits from its parents. A child class can have its properties in addition to inherited ones. The deriving class is called a derived, sub, or child class, while the class it derives from is the base, super, or parent class. This concept is consistent across programming languages, though implementation differs. The goal is to call a function defined in the parent class using the child class there are several approaches for this.
Direct calling method
A derived class has access to all characteristics of its base class, using the child class's object to refer to the parent class's function makes perfect sense.
Example: To demonstrate directly calling a parent method from a child class using JavaScript.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Calling parent from child class</title>
</head>
<body>
<script type="text/javascript">
class Parent {
func1() {
alert("inside func1() of class parent");
}
func2() {
alert("inside func2() of class parent");
}
}
class Child extends Parent {
func3() {
alert("inside func3() of class Child");
}
}
// Declaring objects
// Parent's object
let p1 = new Parent();
// Child's object
let c1 = new Child();
// Calling func()1 using parent's object
p1.func1();
// Calling func1() using child's object
c1.func1();
</script>
</body>
</html>
Output:
Output
Using Super Method
The super keyword in JavaScript is used to call functions and constructors from the parent class. In the child class, super refers to the parent class's methods or constructors, allowing the child to invoke them. This is useful for function overloading and when a specific requirement needs the parent's version of a function.
Example: To demonstrate calling a parent method from child class in JavaScript using super method.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Calling parent from child class</title>
</head>
<body>
<script type="text/javascript">
class Parent {
func1() {
alert("inside func1() of class parent");
}
func2() {
alert("inside func2() of class parent");
}
}
class Child extends Parent {
// Overloaded function
func1() {
alert("inside func1() of class Child ");
alert("calling func1() of parent class");
// Calling for parent's version of func1()
super.func1();
}
}
let c1 = new Child();
// Call to func1() of child class
// There the func1() will call func1()
// From parent using super
c1.func1();
</script>
</body>
</html>
Output:
OutputCalling method & Constructor
This approach demonstrates calling a parent class method from a child class in JavaScript using the super keyword. By extending a child class from a parent class, super allows the child to access and invoke the parent's methods directly, aiding in reusing and extending functionality in object-oriented programming.
Example: To demonstrate calling a parent method from child class in JavaScript using calling method and constructor.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Call method and constructor from child class</title>
</head>
<body>
<script type="text/javascript">
class Parent {
constructor(name) {
this.name = name;
}
display() {
alert("name: " + this.name);
}
}
class Child extends Parent {
constructor(name, num) {
// Calling parent's constructor
super(name);
this.num = num;
}
display() {
// Calling display() from parent
super.display();
alert("num: " + this.num);
}
}
let p1 = new Parent("a");
let c1 = new Child("b", 1);
p1.display();
c1.display();
</script>
</body>
</html>
Output:
Output