javascript - 使用 javascript 的 call() 理解链式构造函数

Question

我正在尝试使用 javascript 的 call 函数来理解链接构造函数。我正在查看 here 中的示例.

我复制并粘贴了示例:

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

我感到困惑的是，Food 和 Toy 的 call 函数是在它们的“构造函数”中调用的，但是对象直到我们调用 Object.create(Product.prototype) 几行之后才创建......或者我是这么认为的。

这里继承的对象到底是在哪里创建的？当我们执行Product.call时到底发生了什么？它是在创建 Product 的实例吗？这与 Object.create(Product.prototype) 有什么关系？

Answer 1

对象在调用构造函数的这两行中被声明和实例化:

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

在实例化函数构造函数 Food 和 Toy 之前，会先声明它们，并将它们的原型(prototype)设置为 Product 的实例。这发生在以下几行中:

function Food(name, price) {/*omitted*/}
Food.prototype = Object.create(Product.prototype);

function Toy(name, price) {/*omitted*/}
Toy.prototype = Object.create(Product.prototype);

关于对父构造函数的调用:

 Product.call(this, name, price);

此行将调用 Product 构造函数，在调用中将 Food 或 Toy 实例分配给 this Product 构造函数，同时传入名称和价格参数。如果您熟悉 Java，这与在派生类中调用 super() 构造函数略有相似。