How to call a parent method from child class in JavaScript?
Last Updated :
27 Jun, 2024
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
Similar Reads
How to call the constructor of a parent class in JavaScript ? In this article, we learn how to call the constructor of a parent class. Before the beginning of this article, we should have a basic knowledge of javascript and some basic concepts of inheritance in javascript. Constructor: Constructors create instances of a class, which are commonly referred to as
4 min read
How to Call a Parent Method from a Child Component in Vue 3 ? Vue.js is a JavaScript framework for building user interfaces. In Vue 3 parent and child component can communicate with each other through props and events. Props are used to pass the data from the parent to the child component and events are used to pass the data from child to parent component. The
3 min read
How to Access Child Method From the Parent in VueJS ? In this article, we are going to discuss how can we access the child method from the parent in VueJS. We need to create such a component that shows the use of accessing the child methods from the parent component. Approach:We will create two components ParentMethod and ChildComponent.ParentMethod vu
3 min read
How to invoke JavaScript code in an iframe from parent page ? In this article, we will see how to invoke JavaScript code in an iframe from a parent page, along with understanding their implementation through the illustrations. Here, JavaScript methods will be located inside the parent page only but can invoke methods in an iframe and can change or update the c
3 min read
How to Create a Custom Callback in JavaScript? A callback is a function that executes after another function has been completed in JavaScript. As an event-driven language, JavaScript does not pause for a function to finish before moving on to the next task. Callbacks enable the execution of a function only after the completion of another, making
3 min read
How to Check if an element is a child of a parent using JavaScript? In this article, we are going to see the methods by which we can Check if an element is a child of a parent using JavaScript. These are the following methods: Table of Content Using the Node.contains() methodLooping through the parents of the given childUsing the hasChildNodes() methodMethod 1: Usin
5 min read