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

In this article, we learn how to call the constructor of a parent class. Before the beginning of this article, we should have a basic knowledge of javascript and some basic concepts of inheritance in javascript.

• Constructor: Constructors create instances of a class, which are commonly referred to as objects. The new keyword in JavaScript causes a constructor to be called when an object is declared. A constructor creates an object and sets any object properties if they exist.
• Inheritance in javascript: The ability of an object to access the properties and methods of another object is called inheritance. Objects can inherit properties and methods from other objects. JavaScript inherits properties through prototypes, and this form of inheritance is often referred to as prototypal inheritance.
• Super keyword in javascript: By executing the super() method in the constructor method, we invoke the constructor method of the parent and get access to the parent’s properties and methods. we can only use the super keyword in the child class of a parent class.

Now let’s understand through examples How to call the constructor of a parent class., There are several methods that can be used to call the constructor of a parent class.

• Using the Super keyword
• Using Object.create() method
• using the call() method with Object.setPrototypeOf()

Approach 1: Using the Super keyword

Super keyword in JavaScript can be used to access and call on an object’s parent, it can be used in two ways. As a function and As an object

Example: In this example, we are going to take two classes one is for the parent class and another is for the child class for inheriting the properties and methods of the parent class so for that we should have to use extends keyword to inherit the child class from the parent class. Then inside the child class constructor, we have to call the parent class constructor otherwise the compiler will throw an error and tell you to mention or call the constructor within the child class constructor method before accessing this.

JavaScript

class Geeks {
    constructor(num1) {
        this.num1 = num1;
    }
    fun() {
        console.log("Parent class method call");
    }
}
class Myclass extends Geeks {
    constructor(num1, num2) {

        // Calling parent class constructor
        super(num1);
        this.num2 = num2;
    }
    fun() {
        super.fun();
        console.log("child class method call");
    }
}
let obj = new Myclass(1, 2);
obj.fun();

Output

Parent class method call
child class method call

Example 2: This cannot be used in a child class constructor until super has been called. In ES6, constructors for subclasses are required to call super, or they must return some object in place of the one that was never initialized. In this example, Geeks class is the parent class of MyClass and when an object is created of type MyClass first it calls the MyClass constructor inside MyClass constructor we have to call the parent class constructor before accessing “this” (own object). So it first called the parent class(Geeks class)constructor before it access the object of its own.

JavaScript

class Geeks {
    constructor(num) {
        this.num = num;
        console.log("inside Parent Class constructor");
    }
}

class MyClass extends Geeks {
    constructor(num1, num2) {
        super(num1);
        this.num2 = num2;
        console.log("inside Child class Constructor");
    }
}
let obj = new MyClass(1, 2);

Output

inside Parent Class constructor
inside Child class Constructor

Approach 2: Using Object.create() method

Object.create() allows setting the child class prototype to parent class prototype, enabling parent constructor to be indirectly called in child class.

Example: In this example, The Child class extends Parent, using Parent.call(this, name) for inheritance. Creates childObj (‘Rhaul’, 25) with properties ‘name’ and ‘age’.

Javascript

function Parent(name) {
    this.name = name;
}

function Child(name, age) {
    Parent.call(this, name);
    // Call the parent class constructor
    this.age = age;
}

Child.prototype = Object.create(Parent.prototype);

const childObj = new Child('Rhaul', 25);
console.log(childObj.name);
console.log(childObj.age);

Output

Rhaul
25

Approach 3: using the call() method with Object.setPrototypeOf()

In this approach Using call() in the Child constructor calls the Parent constructor, setting Child’s properties. Object.setPrototypeOf(Child.prototype, Parent.prototype) establishes prototype inheritance between Child and Parent.

Example: In the example, Child extends Parent using Parent.call(this, name), sets name for Child, and Object.setPrototypeOf(Child.prototype, Parent.prototype) establishes inheritance.

Javascript

function Parent(name) {
    this.name = name;
}

function Child(name, age) {
    Parent.call(this, name);
    // Call the parent class constructor
    this.age = age;
}


const childObj = new Child('Rhaul', 25);

console.log(childObj.name);
console.log(childObj.age);

Output

Rhaul
25