为什么这段代码使用<function>.call()？

Question

代码来自mozilla website

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);/// why not this be Product(name,price)
   this.category = 'food';
}
Food.prototype = new Product();

可能很傻的事情，看不懂这句话

Product.call(this, name, price);

既然产品和食品都是全局功能，为什么我们必须使用Product.call

Answer 1

因为您希望在食品对象上应用Product函数。只是在不使用call的情况下调用它将导致错误的this value，并且在Product中添加的属性将被附加到错误的对象。

还可以学习here about inheritance。

Answer 2

通常使用new来调用Product函数，它是一个构造函数。在调用函数时使用new创建一个新的空对象，并以新对象作为上下文调用函数，它还设置了原型链。

在本例中，Food是Product的子类，它希望在Food的新实例上运行产品构造函数。

举个例子就能说明问题：

var f = new Food ('apple', 10)

f.name = 'apple'
f.price = 10
f.category = 'food'

通过使用Food的新实例调用Product构造函数，将名称和价格类别添加到对象中。

Answer 3

Product.call(this, name, price);

此行调用产品函数，并将this作为调用对象，将名称和价格作为参数

这允许您将产品视为食品的一种方法，而无需明确指定它。如果不这样做，在product中对" this“的任何调用都将指向全局对象。取而代之的是，它们现在被分配给正在创建的食物实例。

在这种情况下，这样做的一个可能的目的是使用Product在构造函数中准备对象，而不是使product成为食品对象定义的永久部分(如果您将其指定为食品方法，同时仍然允许其他人重用它，则不可能发生这种情况(如果您将其作为构造函数的逻辑的一部分或构造函数中的内部函数)