javascript - 使用 .call() 在 JavaScript 中继承对象的不同方法

Question

我正在阅读 MDN example for .call()并在我的 Chrome 控制台中测试了以下代码:

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

  if (price < 0) {
    throw RangeError('Cannot create product ' +
                      this.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);

var cheese = new Food('feta', 5); // Food {name: "feta", price: 5, category: "food"}

在尝试之后，我发现要么删除 Food.prototype = Object.create(Product.prototype); 要么将其更改为 Food.prototype = Product.prototype; 也同样有效并返回相同的结果。

问题:调用有什么区别:

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

2) Food.prototype = Product.prototype;

3) 完全删除 Food.prototype = Object.create(Product.prototype);

Answer 1

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

您的食品原型(prototype)将是产品原型(prototype)的副本。这是正确的方法。

1. Food.prototype = Product.prototype;

您的 Food 原型(prototype)将链接到您的 Product 原型(prototype):您将在 Food 原型(prototype)上做的每件事(如附加功能)也将提供给 Product。

以下面的例子为例:

Food.prototype = Product.prototype;

Food.prototype.eat = function () {
    console.log("num num num");
};

Product test = new Product("toto", 42);

test.eat(); // This will output "num num num", this shouldn't.

1. 移除 Food.prototype = Object.create(Product.prototype);完全

不会有继承，您将无法在 Food 上调用 Product 函数。但是，如果您仍然在 Food 构造函数上进行 Product.call，那么您在构造函数上设置的每个属性(例如示例中的名称和价格)也将被设置。只有方法不会被设置。

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

Product.prototype.describe = function () {
    console.log(this.name + " : " + this.price);
};

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

var cheese = new Food("cheese", 5);

console.log(cheese.name); // Will work, because name was set in constructor.
cheese.describe(); // Won't work, because you didn't copy prototypes.