javascript - 为什么知道.call()和.apply()之间的区别如此重要？

Question

我读过很多关于JavaScript面试问题的网页，我注意到其中很多人都说了解.call（）和.apply（）之间的区别很重要。

例如：

http://www.sitepoint.com/5-typical-javascript-interview-exercises/

https://github.com/h5bp/Front-end-Developer-Interview-Questions

对于我的一生，我无法理解为什么这么重要。有人知道吗？对我来说，这和了解js较长日期和js较短日期之间的区别一样重要（也就是说，对我而言似乎并不重要）。我的直觉告诉我某个时候有影响力的人说，了解.call（）和.apply（）之间的区别很关键，每个人都复制了此人的讲话。但是也许我对.call（）和.apply（）有误解？我不确定。

Answer 1

简而言之，更高级的Javascript类型有时需要使用.call()或.apply()，特别是试图代理功能并传递参数或控制this值的代码。

如果要执行这些类型的操作，则必须知道.call()和.apply()的工作方式，以便可以使用正确的方法（因为它们的工作方式不同）。如果您不执行这些高级操作，则无需使用它们就可以编写很多Javascript。

作为一个采访问题，我认为这是对您是否了解Javascript中参数传递，调用方法和this处理的某些更高级细微差别的合理测试。如果您想在这些类型的问题上做得很好，那么您将需要同时理解.call()和.apply()，现在如何解释它们的作用以及如何以及何时使用它们，以及何时使用一个与另一个。 。

经验不足的Javascript程序员通常不太了解this的整个概念以及如何在Java中对其进行控制或设置（我什至见过一些经验丰富的开发人员对cc的理解都不深），因此在某事上对候选人进行了测验与之相关的是一个合理的测试，而.call()和.apply()对此至关重要。

如果您正在开发库或框架代码，则在工作中更有可能使用.call()或.apply()。



以下是基本摘要：

Javascript中的每个函数都是一个具有某些属性的对象。因此，除了能够调用func()之类的函数外，您还可以引用诸如func.length之类的属性。

每个函数具有的两个属性是.call()和.apply()。它们都允许您以某种不同的方式调用函数，而不仅仅是将其称为func()。

。呼叫（）

当然，我们都知道，如果您只想调用带有固定数量参数的函数，就可以执行func(arg1, arg2)，这些参数将传递给该函数，但是如果您想控制this值将是您传递那些固定参数时的值？以func(arg1, arg2)形式调用func将导致该函数内的this值被设置为在浏览器中为window的全局对象，或者以严格模式运行至undefined。 Javascript中的每个函数调用（例如func(arg1, arg2)）都以这种方式重置this指针。这是.call()的来源。您可以执行：

func.call(someThisValue, arg1, arg2)

它会执行与func(arg1, arg2)相同的操作，除了会导致将this指针设置为someThisValue。

注意：您还可以仅将.call()与一个参数一起使用，它将仅设置this指针，而不传递任何参数。

func.call(someThisValue)

。应用（）

但是，如果参数列表不固定并且参数在可变长度数组或类似数组的对象中，该怎么办。您不能真正使用.call()，因为您不能为每个可能的参数列表键入正确的.call()语句。这是.apply()出现的地方。.apply()的规范用法是当您尝试传递其他函数调用的参数时。当您代理其他函数调用以略微修改其行为，但仍然调用原始函数时，这很常见，原始函数要么具有各种形式（因此您不完全知道所传递的参数），要么具有多种不同类型的函数呼叫全部通过此代理。在这种情况下，通常可以将.apply()与arguments对象一起使用。您可以在MDN polyfill for .bind()中看到一个示例。

假设我想挂钩一些名为doIt()的现有函数以用于记录目的，并且doIt()具有许多可以调用的不同方法。使用.apply()，我可以这样做：

// regular function already defined in your program
function doIt(arg1, arg2) {
    // do something
}

// then actual usage elsewhere in the program would be just this:
doIt("foo", "bar");

// now install a proxy that can intercept all calls to doIt() and
// add some behavior before and after
(function(origDoIt) {
     // replace doIt function with my own proxy
     doIt = function() {
         console.log("before doIt()");
         // call the original function with all the arguments and this pointer
         // that were passed
         var retVal = origDoIt.apply(this, arguments);
         console.log("after doIt()");
         return retVal;
     }
})(doIt);

仅供参考，.apply()也可以用于设置this指针，如下所示：

func.apply(someThisValue)

在该特定情况下（且仅在这种情况下），它与.call()相同。



这是.apply()我最喜欢的用途之一。 Math.max()方法接受可变数量的参数，它将返回所有这些参数中的最大数量。从而：

Math.max(1,2,3,4)

将返回4。

但是，使用.apply()，我们可以在任何数组中找到最大数量。

var list = [999,888,777,666,555,444,333,1000];
var m = Math.max.apply(Math, list);
console.log(m);    // 1000

我们正在使用.apply()将整个list数组作为参数发送到Math.max()，因此它将在整个数组上运行。

注意，当ES6在任何地方或您特定的执行环境中完全实现时，您还可以使用新的传播运算符执行类似的操作：

var list = [999,888,777,666,555,444,333,1000];
var m = Math.max(...list);
console.log(m);    // 1000

这简直是​​我们使用.apply()进行操作的简写