How to call the constructor of a parent class in JavaScript?

JavascriptWeb DevelopmentFront End Technology

In this article, we are going to explore constructors in an object. We can create inheritance in terms of object, i.e. a parent object can have one or multiple child objects. Now we can call the constructors of a parent object from the child object.

Constructor

These are the instances of a class that is commonly referred to as an Object. The new keyword from JavaScript uses a constructor to be called when an object needs to be declared or created. We can set properties into an object using these constructors.

Inheritance in JavaScript

This is the ability of an object to access the properties or methods of another object. This ability is known as Inheritance. Objects can inherit properties and methods from the parent Objects. And the child objects can extend the parent properties.

For calling the constructor of a parent class we can use the super keyword. The super() method from the constructor method is used for the invocation of the constructor method of the parent class to get access to the parent’s properties and methods.

Example 1

In the below example, we have created 2 classes i.e. parent and the child class. The child class extends the parent class. Now for calling the constructor from the parent class we will use the super() method that will be responsible for calling this constructor and executing the actions necessary.

# index.html

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Property Descriptors</title>
</head>
<body>
   <h1 style="color: green;">
      Welcome To Tutorials Point
   </h1>
   <script>
      class Parent {
         constructor(num1) {
            this.num1 = num1;
         }
         fun() {
            console.log("Parent class method call");
         }
      }
      class Child extends Parent {
         constructor(num1, num2) {
            // Calling parent class constructor
            super(num1);
            this.num2 = num2;
         }
         fun() {
            super.fun();
            console.log("Child class method call");
         }
      }
      let obj = new Child(2, 3);
      obj.fun();
      console.log(obj);
   </script>
</body>
</html>

Output

On successful execution of the above program you will find the result in the console similar as below screenshot

Example 2

In the below example, we are calling the instance of the base class from the child class. Since the instance created is of base class the method for child class will not be called.

# index.html

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Property Descriptors</title>
</head>
<body>
   <h1 style="color: green;">
      Welcome To Tutorials Point
   </h1>
   <script>
      // Object
      const Obj = {
         property1: "Tutorials Point",
         property2: "Simply Learning"
      };
      const descriptor1 = Object
         .getOwnPropertyDescriptor(Obj, 'property1');
      const descriptor2 = Object
         .getOwnPropertyDescriptor(Obj, 'property2');
      console.log(descriptor1.configurable);
      // expected output: true
      console.log(descriptor1.enumerable);
      // expected output: true
      console.log(descriptor1.value);
      // expected output: Tutorials Point
      console.log(descriptor2.value);
      // expected output: Simply Learning
   </script>
</body>
</html>

Output


raja
Updated on 22-Apr-2022 12:46:27

Advertisements