Open In App

How to call a parent method from child class in JavaScript?

Last Updated : 28 Apr, 2023
Improve
Improve
Like Article
Like
Save
Share
Report

A property in programming known as inheritance, by virtue of which a class can derive the methods and properties of other classes analogous to parent-child relationships in living beings. A child inherits its characteristics from its parents but it doesn’t work the other around. Also, similar to the parent-child relationship of living beings, a child can have its own properties too in addition to inherited ones. In the programming context, the class that derives from other classes is known as a derived or sub or child class. Whereas, the class from which the characteristic is derived is known as the base or super, or parent class.  

The concept of inheritance, sub, and superclass is the same in all programming languages the only difference being their implementation. The objective here is to call a function defined in the parent class with the help of the child class. To obtain this result following methods listed can be used.

Direct calling method: Since 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:

javascript




<!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: Two times will pop out that alert one time by using the parent’s object and other time by using the child’s object. 

Using super Method: The super keyword is used in JS to call functions and constructors from the parent class. Wherever super is mentioned in the child class the compiler looks for the specified function in its parent’s class. This is mostly used when functions are overloaded and a certain requirement asks for the parent’s version of the function. It is also used to overload constructors.

Example:

javascript




<!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: 

Calling method & Constructor: In this program, we call method and constructor from the child class.

Example:

javascript




<!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: 



Like Article
Suggest improvement
Previous
Next
Share your thoughts in the comments

Similar Reads