JavaScript原型繼承

Question

我不了解某些內容>讓我們看一下MDN的示例：

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);
Food.prototype.constructor = Food; // Reset the constructor from Product to Food

為什么我必須寫這部分：

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

不是Product.call(this, name, price); 已經將該屬性（原型）從產品復制到食品了？

Answer 1

這就是在JavaScript中對類進行偽經典實例化的方式。 首先讓我們看看您剛完成第一部分時會發生什么，但讓我們添加一些內容以進行澄清：

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

Product.prototype.declare = function () {
  console.log('I like ' + this.name);
} 

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

在控制台中運行它，然后運行console.dir(Product) vs console.dir(Food) 。 食品與產品具有某些相同的屬性。 但是， Food無法訪問Product原型上的“聲明”方法。 因此，我們需要設置Food的原型。 在上面的代碼之后在控制台中運行此命令：

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

再次為Food運行console.dir 。 現在，Food的原型具有與Product相同的屬性/方法。 但是，原型的構造函數現在為“產品”。 解決此問題的最后一步是設置Food.prototype.constructor使Food的構造函數再次是Food ，但具有Product所有屬性/方法。

Food.prototype.constructor = Food;

在JavaScript中使用偽經典實例化實現完全繼承是一個奇怪但邏輯的過程。