JavaScript 中构造函数继承的原理是什么？

推荐答案

在 JavaScript 中，构造函数继承是通过在子类的构造函数中调用父类的构造函数来实现的。通过使用 call 或 apply 方法，可以在子类的上下文中执行父类的构造函数，从而将父类的属性和方法继承到子类中。

// www.javascriptcn.com code example
function Parent(name) {
    this.name = name;
}

Parent.prototype.sayHello = function() {
    console.log(`Hello, my name is ${this.name}`);
};

function Child(name, age) {
    Parent.call(this, name); // 调用父类构造函数
    this.age = age;
}

// 继承父类的原型方法
Child.prototype = Object.create(Parent.prototype);
Child.prototype.constructor = Child;

const child = new Child('Alice', 10);
child.sayHello(); // 输出: Hello, my name is Alice

本题详细解读

1. 构造函数继承的基本原理

构造函数继承的核心思想是通过在子类的构造函数中调用父类的构造函数，从而将父类的属性和方法继承到子类中。具体来说，使用 call 或 apply 方法可以在子类的上下文中执行父类的构造函数，使得父类的属性和方法能够被绑定到子类的实例上。

2. 原型链继承

除了构造函数继承，JavaScript 还通过原型链来实现继承。通过将子类的原型对象设置为父类的一个实例，子类可以继承父类原型上的方法和属性。这种方式通常与构造函数继承结合使用，以确保子类既能继承父类的实例属性，也能继承父类的原型方法。

3. 继承父类原型方法的步骤

1. 调用父类构造函数：在子类的构造函数中使用 Parent.call(this, ...) 来调用父类的构造函数，确保父类的实例属性被正确初始化。

2. 设置子类的原型：通过 Child.prototype = Object.create(Parent.prototype)，将子类的原型对象设置为父类原型的一个实例。这样，子类就可以继承父类原型上的方法。

3. 修复构造函数指向：由于 Object.create 会创建一个新的对象，并且这个对象的 constructor 属性会指向父类，因此需要手动将子类原型的 constructor 属性指向子类本身，即 Child.prototype.constructor = Child。

4. 示例代码解析

在示例代码中，Parent 是一个父类构造函数，它有一个 name 属性和一个 sayHello 方法。Child 是子类构造函数，它继承了 Parent 的 name 属性，并添加了一个新的 age 属性。

• Parent.call(this, name)：在 Child 的构造函数中调用 Parent 的构造函数，确保 Child 的实例拥有 name 属性。
• Child.prototype = Object.create(Parent.prototype)：将 Child 的原型对象设置为 Parent 的原型对象的一个实例，使得 Child 可以继承 Parent 的原型方法。
• Child.prototype.constructor = Child：修复 Child 原型的 constructor 属性，使其指向 Child 本身。

通过这种方式，Child 的实例既继承了 Parent 的实例属性，也继承了 Parent 的原型方法。