我不明白什么>让我们看一下 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);
不是已经将该属性(Prototype)从 Product 复制到了 Food 吗?
最佳答案
这就是在 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)
与 console.dir(Food)
。食品具有一些与产品相同的属性。但是,Food
无法访问 Product
原型(prototype)上的“declare”方法。因此,我们需要设置Food
的原型(prototype)。在上面的代码之后在控制台中运行:
Food.prototype = Object.create(Product.prototype);
再次运行Food
的console.dir
。现在,Food 具有与 Product
具有相同属性/方法的原型(prototype)。然而,原型(prototype)的构造函数现在是“Product”。解决此问题的最后一步是设置 Food.prototype.constructor
,因此 Food
的构造函数再次是 Food
,但具有所有属性/产品
的方法。
Food.prototype.constructor = Food;
通过 JavaScript 中的伪经典实例化实现完全继承是一个奇怪但合乎逻辑的过程。
关于Javascript-原型(prototype)继承,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31726545/