在 JavaScript 中安全地继承原型 [重复]

Question

假设我正在为我的应用程序中的一些基本继承进行拍摄，我可以通过将我的孩子的原型设置为父母来实现这一点。

// Parent "class"
var Car = function(year) {
    this.year = year;
};

Car.prototype.drive = function() {
    console.log('Vrooom');
};

// Child "class"
var Toyota = function() {
    Car.apply(this, arguments);
};

Toyota.prototype = Car.prototype;

var myCar = new Car(2010), myToyota = new Toyota(2010);

myCar.drive(); // Vrooom
myToyota.drive(); // Vrooom

似乎可行，但显然很糟糕，因为如果我在 Toyota.prototype 上设置新方法，它将在 Car 的原型上设置。

Toyota.prototype.stop = function() {
    console.log('stooop');
};

myCar.stop(); // stooop  <--- bad
myToyota.stop(); // stooop  <--- good

为了解决这个问题，我可以添加一个中介来代替Toyota.prototype = Car.prototype;：

var ctor = function() { };
ctor.prototype = Car.prototype;

Toyota.prototype = new ctor();

Toyota.prototype.stop = function() {
    console.log('stooop');
};

myCar.stop(); // throws undefined error  <--- good
myToyota.stop(); // stooop  <--- good

但我不明白为什么会这样。 ctor 创建一个新实例，其原型设置为Car's 原型，然后Toyota 将其原型设置为该新实例。

但是为什么要创建一个空对象，其原型会被Toyota 的原型引用？
为什么不像在第一个示例中那样在Toyota 上设置新方法在Car 上设置它？ 如果我想要几层继承怎么办，似乎我每次都需要用new ctor将它们粘合在一起？

Answer 1

但是为什么要创建一个带有被引用的原型的空对象 丰田的原型？

因为如果你这样做：Toyota.prototype = new Car();

现在Toyota的原型是Car的一个实例，这意味着除了链中有Car的原型，它还具有在 Car 构造函数本身中设置的任何属性。基本上，您不希望 Toyota.prototype 有一个名为 year 的属性，如下所示：Toyota.prototype.year。正因为如此，最好有一个像这样的空构造函数：

var ctor = function() { };
ctor.prototype = Car.prototype;

Toyota.prototype = new ctor();

现在 Toyota.prototype 有 new ctor() 实例作为它的原型，而 Car.prototype 在它自己的链中。这意味着 Toyota 的实例现在可以执行存在于 Car.prototype 中的方法。

为什么在 Toyota 上设置新方法不像在 Car 上那样设置 在第一个例子中？

有了这个：Toyota.prototype = Car.prototype;，您将 Toyota 的原型设置为与 Car.prototype 包含的完全相同的对象。由于它是同一个对象，因此在一个地方更改它也会在其他任何地方更改它。这意味着对象是通过引用而不是通过值传递的，这是另一种说法，当您将一个对象分配给 3 个不同的变量时，无论您使用哪个变量，它都是同一个对象。例如，字符串是按值传递的。下面是一个字符串示例：

var str1 = 'alpha';
var str2 = str1;
var str3 = str1;

str2 = 'beta';

// Changing str2 doesn't change the rest.
console.log(str1); //=> "alpha"
console.log(str3); //=> "alpha"
console.log(str2); //=> "beta"

现在比较对象及其属性；

var obj1 = {name: 'joe doe'};
var obj2 = obj1;
var obj3 = obj1;

console.log(obj1.name); //=> "joe doe"
console.log(obj2.name); //=> "joe doe"
console.log(obj3.name); //=> "joe doe"

obj2.name = 'JOHN SMITH';

console.log(obj1.name); //=> "JOHN SMITH"
console.log(obj2.name); //=> "JOHN SMITH"
console.log(obj3.name); //=> "JOHN SMITH"

如果我想要多层继承怎么办...

这是另一种创建继承层的方法：

var Car = function(year) {
    this.year = year;
};

Car.prototype.drive = function() {
    console.log('Vrooom');
};

var Toyota = function() {
    Car.apply(this, arguments);
};

// `Object.create` does basically the same thing as what you were doing with `ctor()`
// Check out the documentation for `Object.create` as it takes a 2nd argument too.
Toyota.prototype = Object.create(Car.prototype);


// Create instances
var 
  myCar = new Car(2010), 
  myToyota = new Toyota(2010);


// Add method to Toyota's prototype
Toyota.prototype.stop = function() {
    console.log('stooop');
};

现在就来试试吧：

myToyota.stop(); //=> 'stooop'
myCar.stop(); //=> 'TypeError: undefined is not a function'

myCar.drive(); //=> Vrooom
myToyota.drive(); //=> Vrooom

Answer 2

您的问题是以下行：

Toyota.prototype = Car.prototype;

然后再修改这个对象：

Toyota.prototype.stop = function() {
    console.log('stooop');
};

因为在第一行中，您将Toyota.prototype 设置为与Car.prototype 完全相同的对象。 这不是一个副本，它是对同一个对象的引用！ 所以只要你修改了Toyota.prototype 上的stop，你实际上同时修改了Toyota.prototype 和Car.prototype，因为它是一回事。

您真正想做的是将第一行替换为：

Toyota.prototype = Object.create(Car);

这样你现在就有了Toyota 的原型指向Car 函数，而不是Car 自己的prototype。恭喜，你已经使用了原型链！ （注意：使用Object.create进行类继承本质上更稳定可靠，因为它不会运行您可能包含在Car函数中的任何代码，而只是设置原型链接。）

要进一步讨论这里到底发生了什么，以及为什么在 JS 中完全不使用“类继承”会更好，你可能想阅读Chapters 4-6 of You Don't Know JS (objects & prototypes)。

关于您的最后一个问题：“如果我想要几层继承怎么办，似乎我每次都需要将它们与一个新的 ctor 粘合在一起？” – 是的，你需要这样做，这是 JavaScript 中（假）类和继承的标准模式。