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

时间:2013-01-25 15:03:24

标签: javascript

代码来自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和Food都是全局函数,为什么我们必须使用Product.call

6 个答案:

答案 0 :(得分:3)

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

在此示例中,Food是子类Product,它希望在Food的新实例上运行Product构造函数。

一个例子应该清楚说明:

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

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

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

答案 1 :(得分:2)

因为您想在食物对象上应用Product功能。只是在没有call的情况下调用它会导致错误this value,并且Product中添加的属性会附加到错误的对象。

还要了解here about inheritance

答案 2 :(得分:2)

Product.call(this, name, price);

此行调用产品函数,其中this作为调用对象,名称和价格作为参数

这使您可以将产品视为食品的一种方法,而无需明确指定。如果不这样做,产品中对“this”的任何调用都将指向全局对象。相反,它们现在被分配给正在创建的Food实例。

在这种情况下执行此操作的一个可能目的是使用Product在构造函数中准备对象,而不将产品作为Food对象定义的永久部分(如果您将其指定为Food的方法,则会发生这种情况,允许它被其他人重用(如果你把它作为构造函数的逻辑或构造函数中的内部函数的一部分就不可能)

答案 3 :(得分:1)

在这种情况下

Product.call(this, name, price);

这 - &gt;是食物实例,而不是窗口

答案 4 :(得分:1)

在JavaScript中有多种调用函数的方法。

其中一个是调用函数对象的call方法。它接受上下文(函数内部this的含义)和函数的参数作为其他参数。

示例:

var context = { foo: 'bar' };
function func(a, b, c) {
   console.log(this.foo);
   console.log(a, b, c);
}
func.call(context, 1, 2, 3);
//'bar'
//1 2 3

还有一种方法类似于call它的apply。它接受两个参数 - 上下文和带有函数参数的数组。

答案 5 :(得分:1)

call函数是所有Function个对象的方法。它允许您将特定上下文传递给函数,实质上设置this关键字在函数内的含义。

MDN Documentation for call()