为何JavaScript代码alert.call.apply(function(a){return a}, [1,2])返回2？

这个问题乍一看有点绕，咱们一步步拆开看，就能搞明白啦。

先看这段代码：alert.call.apply(function(a){return a}, [1,2])

第一步：先揪出alert.call的真面目 #

你可能以为alert.call是和alert相关的东西，但实际上，所有函数都从Function.prototype继承了call方法，所以alert.call其实就是Function.prototype.call本身——说白了，这里只是借alert的壳拿到了call这个方法而已。

所以代码可以等价写成：

Function.prototype.call.apply(function(a){return a}, [1,2])

第二步：理解apply在这里干了啥 #

apply的作用很直接：它会调用目标函数（这里的目标函数就是Function.prototype.call），同时做两件事：

• 把目标函数（也就是call）执行时的this绑定到apply的第一个参数，也就是那个匿名函数function(a){return a}
• 把apply的第二个参数（数组[1,2]）拆成单个参数，传给目标函数call

所以这一步就相当于直接这么调用：

Function.prototype.call.call(function(a){return a}, 1, 2)

第三步：拆解call.call的核心逻辑 #

现在到了最关键的部分，call.call(fn, 1, 2)到底在执行什么？

回忆下call方法的本质：当你写某个函数.call(绑定的this值, 参数1, 参数2...)时，其实就是调用这个函数，把它的this绑定成指定的值，然后把后面的参数传给它。

那在call.call(fn, 1, 2)里：

• 这里的“某个函数”就是call方法自己的this，也就是我们传的匿名函数fn
• “绑定的this值”是第一个参数1（不过fn里根本没用到this，所以这个值完全不影响结果）
• 传给fn的参数是剩下的2

所以这一步最终就等价于执行：

fn(2)
// 也就是调用function(a){return a}(2)，返回2

总结一下 #

绕了一圈，本质就是把匿名函数function(a){return a}调用了，参数是2，所以结果自然是2啦。

内容的提问来源于stack exchange，提问作者Radinator