Javascript - parent.call(arguments) 和 child.prototype = new parent(arguments) 之间的区别？

Question

我正试图完全理解原型继承和 Javascript 的继承系统。

我试图弄清楚这两个示例之间的区别。我猜测它与原型继承链有关，但我很难找到与这两者相关的信息。

示例 1 - call()

function Vehicle(wheels) {
    this.wheels = wheels;
}

function Car(doors) {
    this.doors = doors;
    Vehicle.call(this,4);
}

示例 2 - 原型

function Vehicle(wheels) {
    this.wheels = wheels;
}

function Car(doors) {
    this.doors = doors;
}
Car.prototype = new Vehicle(4);

Answer 1

在第一个示例中，您正在初始化 Car 对象，使其具有新 Vehicle 对象的所有相同属性。但是，它不是“真正的”继承，体现在以下方面：

var car = new Car(2);
car instanceof Vehicle; // => false

这是第一件事：instanceof 不起作用。这是第二个：

var car = new Car(2);

Vehicle.prototype.drive = function() {
  console.log('vroom!');
};

car.drive(); // throws

所以这是第二件事：对Car 实例的访问不会到达原型链到Vehicle 的原型。

考虑到这一点，我倾向于第二种方法。

---

也就是说，您可能实际上想要执行 both，因为您的 Vehicle 构造函数中可能存在每个实例的初始化逻辑，您实际上希望在何时执行你初始化一个Car（这不会仅仅通过设置原型来实现）。

要理解我的意思：在您的示例中，您总是将4 作为wheels 参数传递给Vehicle 构造函数，这是有道理的。但是假设我们添加另一个可能因实例而异的参数：

function Vehicle(wheels, color) {
  this.wheels = wheels;
  this.color = color;
}

现在我们可以采取两种方法：

function Car(doors, color) {
  this.doors = doors;
  Vehicle.call(this, 4, color);
}

Car.prototype = new Vehicle();

请注意，在设置Car 的原型时，我们实际上在Car 中显式调用构造函数，而不是向Vehicle 构造函数传递任何内容。这样我们就可以正确设置color。

另一种方法是：

function Car(doors, color) {
  this.doors = doors;
  this.color = color;
}

Car.prototype = new Vehicle(4, null);

那也行。

Answer 2

解释器添加一个内部引用（如果你愿意，你可以调用proto），它指向相应构造函数的原型。

如果您运行第一个示例并实例化每个构造函数的两个实例，您最终会得到如下内容：

这里需要注意的是：

• carsObj 有一个 Car 构造函数未定义的附加属性。原因是您在 Car 构造函数中的这一行 Vehicle.call(this,4);。
• 构造函数及其实例都指向一个称为原型的对象；这是可以存储共享成员的地方（即方法或共享属性）。此外，这允许通过原型链创建继承层次结构。
• car 对象的实例将永远无法访问 Vehicle 原型的成员。

最后一个要点是限制应用正确继承的内容。

同样，如果您运行第二个示例，内存可能如下所示：

区别非常明显。 Car 构造函数的原型属性指向 Vehicle 构造函数的一个实例，Car 构造函数的所有实例也是如此。这是由于这条线Car.prototype = new Vehicle(4);。

此结构允许 Car 构造函数的实例访问在父类的原型上定义的所有属性。这是由于 JavaScript 在查找属性时如何遍历链接的原型。

这种技术的缺点是 Car 实例不从 Vehicle 构造函数继承任何实例属性。它只继承共享成员。

更好的解决方案是结合以上两种技术；那就是：

function Vehicle(wheels) {
   this.wheels = wheels;
}

function Car(doors) {
   this.doors = doors;
   Vehicle.call(this, 4)
}

Car.prototype = Object.create(Vehicle);

这样，Car 构造函数的实例将继承共享成员和实例成员。