对象的 Javascript 原型(prototype)继承和链接构造

Question

阅读时https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call对于“使用对象的链式构造函数调用”部分:

function Product(name, price) {
  this.name = name;
  this.price = price;

  if (price < 0)
    throw RangeError('Cannot create product "' + name + '" with a negative price');
  return this;
}

function Food(name, price) {
  Product.call(this, name, price);
  this.category = 'food';
}
Food.prototype = Object.create(Product.prototype);

function Toy(name, price) {
  Product.call(this, name, price);
  this.category = 'toy';
}
Toy.prototype = Object.create(Product.prototype);

var cheese = new Food('feta', 5);
var fun = new Toy('robot', 40);

我读到一个对象的原型(prototype)实际上是一个指向构造函数的属性内存位置的对象本身。

在 function Food(name, price) 中，它通过 Product.call(this) 继承了构造函数的 Product 属性。 Food.prototype = Object.create(Product.prototype); 在做什么？它是否向 Food 添加了另一个原型(prototype)(如果甚至可以有 2 个原型(prototype))？或者它是否附加到具有相同 Product 原型(prototype)值的 Food 原型(prototype)(它已经继承了它，所以对我来说没有意义)？

Answer 1

问题的本质可以概括为“为什么你需要设置原型(prototype)”？换句话说，为什么这不足以调用基类构造函数而不设置原型(prototype)？

诀窍是您可能不设置子类函数的原型(prototype)!没有它，您的简单示例也能正常工作。注释掉该行，您会发现代码在有和没有这一行的情况下都有效:

Food.prototype = Object.create(Product.prototype);

这是因为您的所有对象属性都在构造函数中设置，并且通过链接构造函数(调用基类构造函数)您可以在子类实例上设置所有属性。

但是考虑一下:

function Base() {
   this.BaseClassMethod = function() {}
}

对比

function Base() {
}

Base.prototype.BaseClassMethod = function() {}

如您所见，没有字段，只有方法。从语义上讲，这两个片段都定义了一个构造函数，该函数创建具有唯一 BaseClassMethod 方法的实例。但是，在第一个代码片段中，为每个创建的类实例创建了一个新的额外函数，而在第二个代码片段中，方法定义是共享的。

这个非常简单的例子表明，相同的语义可以通过具有不同配置文件的不同方式实现——在上面的例子中至少是不同的内存占用。

这两者之间的另一个区别是，在后者中，函数可以在将来的某个地方重新定义，新版本会影响所有以前创建的实例，而在第一个片段中，您可以做的是在特定实例中更改定义但不容易“在所有以前创建的实例中”。

这是否是您的目标是另一回事。您可以在这两种为类分配方法的方式中自由选择。

这就是你的问题的答案:如果你只从子类构造函数。

换句话说，同时调用基类构造函数和设置原型(prototype)链使您的继承独立在基类中定义方法的方式。