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

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.
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: 
HTML-Misc
JavaScript-Misc
Picked
JavaScript
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Convert a string to an integer in JavaScript
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
How to append HTML code to a div using JavaScript ?
How to Open URL in New Tab using JavaScript ?
Roadmap to Become a Web Developer in 2022
Installation of Node.js on Linux
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?
Top 10 Projects For Beginners To Practice HTML and CSS Skills