Skip to content
Related Articles

Related Articles

Improve Article

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

  • Last Updated : 05 Jun, 2020

A property in programming known as inheritance, by virtue of which a class can derive the methods and properties of other class analogous to parent-child relationship 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 derived or sub or child class. Whereas, the class from which characteristic is derived is known as the base or super or parent class. 
 

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

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it's lowest price ever!

Direct calling method: Since a derived class has access to all characteristics of its base class, using child class’s object to refer to parent class’s function makes perfect sense.

javascript




<!DOCTYPE html>
<html>
    <head>
        <title>Calling parrent 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 parent class. Where ever 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 parent’s version of the function. It is also used to overload constructors

javascript




<!DOCTYPE html>
<html>
    <head>
        <title>Calling parrent 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 aprent using super
            c1.func1();
        </script>
    </body>
</html>

Output: 

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

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: 




My Personal Notes arrow_drop_up
Recommended Articles
Page :