为何Array.map(Function.call, Number)执行结果为[0,1,2,3]？原理探究

嘿，这个问题初看确实有点反直觉，咱们一步步拆解，就能搞懂为啥结果是[0,1,2,3]了：

先理清两个核心点 #

• Array.prototype.map(callback, thisArg)：遍历数组时，会对每个元素调用callback，thisArg用来指定callback执行时的this指向。每次调用callback都会传三个参数：当前元素值、当前索引、原数组。
• Function.prototype.call(context, ...args)：这个方法的作用是调用一个函数（也就是call自身的this指向的函数），把该函数的this绑定为context，再把args作为参数传给它。

逐行拆解执行过程 #

当你写array1.map(Function.call, Number)时，相当于给map传了两个关键参数：

1. 回调函数是Function.call（也就是Function.prototype.call这个内置方法）
2. thisArg是Number构造函数

接下来map会遍历array1的每一项，每次调用Function.call时，都会把this绑定为Number，同时传入当前元素、索引、原数组这三个值。

单个元素的调用细节（拿第一个元素1举例） #

对于第一个元素1（索引为0），map实际执行的代码可以等价为：

Function.call.call(Number, 1, 0, array1)

这里的第一个call是Function.prototype.call，它的作用是调用Function.call这个函数，把Function.call的this设为Number，再传入参数1, 0, array1。

而Function.call本身的逻辑是：调用它的this指向的函数（也就是Number），把Number的this绑定为第一个参数1，然后把剩下的参数0, array1传给Number。

但Number作为普通函数调用时，只会处理第一个传入的参数，把它转换成数字返回，后面的参数直接忽略。所以这里Number实际拿到的参数是0，自然返回0。

其他元素的执行逻辑同理 #

• 第二个元素4（索引1）：Number拿到的参数是1，返回1
• 第三个元素9（索引2）：Number拿到的参数是2，返回2
• 第四个元素16（索引3）：Number拿到的参数是3，返回3

最终就得到了结果[0,1,2,3]。

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