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

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.

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

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


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

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output: 

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

javascript

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output: 

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.