JavaScript 如何调用父类的构造函数

在本文中，我们将学习如何调用父类的构造函数。在阅读本文之前，我们应该对JavaScript有基本的了解，并对JavaScript中的继承有一些基本概念。

构造函数： 构造函数用于创建类的实例，通常被称为对象。在JavaScript中，使用new关键字声明对象时会调用构造函数。构造函数创建一个对象并设置任何存在的对象属性。
JavaScript中的继承： 一个对象访问另一个对象的属性和方法的能力被称为继承。对象可以从其他对象中继承属性和方法。JavaScript通过原型继承属性，这种形式的继承通常被称为原型继承。
JavaScript中的super关键字： 通过在构造函数方法中执行super()方法，我们调用父类的构造函数，并获得对父类属性和方法的访问权限。我们只能在父类的子类中使用super关键字。

现在让我们通过示例来理解如何调用父类的构造函数。有几种方法可以用来调用父类的构造函数。

使用super关键字
使用Object.create()方法
使用带有Object.setPrototypeOf()方法的call()方法

方法一：使用super关键字

JavaScript中的super关键字可以用于访问和调用对象的父类，它有两种用法：作为一个函数和作为一个对象。

示例： 在这个示例中，我们将创建两个类，一个是父类，一个是子类，子类从父类继承属性和方法，为了实现这一点，我们需要使用extends关键字从父类继承子类。然后，在子类的构造函数内，我们需要调用父类的构造函数，否则编译器会抛出错误并要求在访问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();

输出

Parent class method call
child class method call

示例2：

在子类构造函数中调用super之前，无法使用该对象。在ES6中，子类的构造函数必须调用super，或者必须返回某个对象来替代未初始化的对象。在这个示例中，Geeks类是MyClass的父类，当创建一个类型为MyClass的对象时，首先调用的是MyClass构造函数。在MyClass构造函数中，我们必须在访问“this”（自身对象）之前调用父类构造函数。因此，它首先调用了父类（Geeks类）的构造函数，然后再访问自身对象。

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);

输出结果

inside Parent Class constructor
inside Child class Constructor

方法二：使用Object.create()方法

Object.create()允许将子类原型设置为父类原型，从而使父类构造函数能够在子类中间接调用。

示例： 在这个示例中，子类继承了父类Parent，并使用Parent.call(this, name)进行继承。创建了具有’name’和’age’属性的childObj（’Rhaul’，25）。

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);

输出

Rhaul
25

方法三：使用call()方法和Object.setPrototypeOf()方法

在这种方法中，使用Child构造函数中的call()方法调用Parent构造函数，设置Child的属性。使用Object.setPrototypeOf(Child.prototype, Parent.prototype)方法建立Child和Parent之间的原型继承关系。

示例： 在示例中，Child通过Parent.call(this, name)扩展了Parent，为Child设置了name属性，使用Object.setPrototypeOf(Child.prototype, Parent.prototype)方法建立了继承关系。

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);

输出