Javascript-原型继承

Javascript- prototype inheritance

本文关键字：继承 原型 Javascript-      更新时间：2023-09-26

我不明白的东西>让我们看看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);不是已经从产品复制到食品的属性(原型)了吗?

这就是在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原型上的"declare"方法。因此，我们需要设置Food的原型。在上述代码之后在控制台中运行此命令:

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

再次运行console.dir for Food。现在，Food有一个与Product具有相同属性/方法的原型。然而，原型的构造器现在是"Product"。修复此问题的最后一步是设置Food.prototype.constructor，因此Food的构造函数再次为Food，但具有Product的所有属性/方法。

Food.prototype.constructor = Food;

在JavaScript中通过伪经典实例化实现完全继承是一个奇怪但合乎逻辑的过程。

相关文章：