上下文使用调用并在Javascript中应用？

Question

伙计们可以解释上下文在Javascript中使用call和apply方法吗？

为什么要用call和apply而不是直接调用函数？

Answer 1

仅当您使用call或apply时，您才可以修改函数内的this上下文。

与其他语言不同 - 在JavaScript中this不引用当前对象 - 而是引用执行上下文并可由调用者设置。

如果你调用一个函数使用new关键字this将正确引用新的对象（构造函数中）..

但在所有其他情况下 - this将引用全局对象，除非通过设置明确请致电

Answer 2

当您想要将不同的this值传递给函数时，您使用call或apply。实质上，这意味着你想要执行一个函数，就像它是一个特定对象的方法一样。两者之间的唯一区别是call期望参数以逗号分隔，而apply需要数组中的参数。

从Mozilla's apply page，其中构造被链接的一个例子：

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.apply(this, arguments); 
    this.category = 'food'; 
} 
Food.prototype = new Product(); 

function Toy(name, price) { 
    Product.apply(this, arguments); 
    this.category = 'toy'; 
} 
Toy.prototype = new Product(); 

var cheese = new Food('feta', 5); 
var fun = new Toy('robot', 40); 

做什么Product.apply(this, arguments)是以下内容：Product构造被施加为在每个Food和Toy构造的函数，并且每个这些对象的实例正在作为this传递。因此，Food和Toy中的每一个现在都具有this.name和this.category属性。

Answer 3

如果您有使用jQuery的经验，您会知道大多数函数都使用this对象。例如，collection.each(function() { ... }); 在此函数内部，"this"引用迭代器对象。这是一种可能的用法。

我个人已经使用.apply()来实现一个请求队列 - 我将一个参数数组插入到队列中，当执行它的时候，我接收一个元素并将其作为处理函数的参数传递使用.apply()，因此如果必须传递一个参数数组作为第一个参数，那么代码更清晰。这是另一个例子。

通常，只要记住那些调用函数的方法存在，并且有一天您可能会发现它们方便地用于实现您的程序。

Answer 4

如果要使函数以不同的this值执行，则使用.call()。它根据指定设置this值，根据指定设置参数，然后调用函数。 .call()与仅执行该函数的区别在于函数执行时this指针的值。当你正常执行这个函数时，javascript会决定指针的位置（通常是全局上下文window，除非函数被调用为对象的方法）。当您使用.call()时，您可以确切指定要将this设置为的内容。

如果要传递给函数的参数在数组中，则使用.apply()。 .apply()也可以导致函数执行一个特定的this值。 .apply()最常用于来自其他来源的不确定数量的参数。它通常也用于通过使用特殊的局部变量arguments将参数从一个函数调用传递到另一个函数调用，其中包含传递给当前函数的参数数组。

我觉得.call()和.apply()的MDN参考页有帮助。

Answer 5

我想不出任何将thisArg设置为不同的正常情况是使用apply的目的。

应用的目的是将一个值的数组传递给一个函数，它需要这些值作为参数。

它已被所有常规日常使用中的传播运算符所取代。

例如

// Finding the largest number in an array 
`Math.max.apply(null, arr)` becomes `Math.max(...arr)` 

// Inserting the values of one array at the start of another 
Array.prototype.unshift.apply(arr1, arr2); 
// which becomes 
arr1 = [...arr2, ...arr1] 

Answer 6

如果你有经验Object Oriented Programming然后调用和适用，如果你继承比较它才有意义，并从子类覆盖父类的属性或方法/功能。这与JavaScript调用如下类似：

function foo() { 
    this.helloworld = "hello from foo" 
} 
foo.prototype.print = function() { 
    console.log(this.helloworld) 
} 

foo.prototype.main = function() { 
    this.print() 
} 


function bar() { 
    this.helloworld = 'hello from bar' 
} 
// declaring print function to override the previous print 
bar.prototype.print = function() { 
    console.log(this.helloworld) 
} 

var iamfoo = new foo() 

iamfoo.main() // prints: hello from foo 

iamfoo.main.call(new bar()) // override print and prints: hello from bar