Array.prototype.map与map.call()运行原理及代码示例疑问咨询

Array.prototype.map 与 map.call() 运行机制详解 #

1. Array.prototype.map 的基础运行机制 #

Array.prototype.map 是数组内置的遍历转换方法，核心作用是对调用它的集合的每一项执行自定义回调，最终返回由所有回调返回值组成的新数组，不会修改原集合。
它本身是泛型方法，不强制要求调用它的this必须是数组，只要是具备length属性、且支持按索引访问元素的类数组对象（比如字符串、DOM节点集合、arguments等）都可以作为它的调用主体。
默认运行逻辑如下：

• 读取调用主体的length属性，确定遍历长度
• 初始化相同长度的空数组作为结果容器
• 按索引从0到length-1遍历调用主体，取出对应索引的元素
• 把当前元素、当前索引、原调用主体三个参数传入回调
• 把回调返回值填入结果数组对应索引位
• 遍历完成后返回结果数组

2. call 和 map 的关联 #

call 是 Function.prototype 上的内置方法，所有函数都可以调用它，作用是手动修改函数运行时的this指向：第一个参数会作为函数运行时的this，后续参数会作为入参传入原函数。
我们平时写arr.map(fn)的时候，map运行时的this就是数组arr；而把Array.prototype.map赋值给变量Map之后，Map本质就是一个普通函数，完全可以调用call方法，通过Map.call(target, fn)的形式，让任意类数组对象target作为map的调用主体，哪怕target本身没有挂载map方法。

3. 示例代码的执行流程 #

示例代码如下：

let Map = Array.prototype.map
let strResult = Map.call("Muhammad asif", (x) => {
    return x.charCodeAt(0);
})
console.log(strResult)

二者配合的执行流程如下：

• 将Array.prototype.map原生方法赋值给变量Map，此时Map就是纯的map方法本身
• 调用Map.call，传入第一个参数为字符串"Muhammad asif"，第二个参数为回调函数：这一步会把map运行时的this指向该字符串
• map方法启动，读取this（也就是字符串）的length属性，拿到长度为13，初始化长度为13的空结果数组
• 按索引从0到12遍历字符串，每次取出对应索引的单个字符（比如索引0取"M"、索引1取"u"等）
• 把取出的单个字符作为参数传入回调，回调返回该字符的Unicode编码，填入结果数组对应索引位
• 遍历完成后将结果数组赋值给strResult，最终控制台打印出所有字符对应的Unicode编码数组

4. 代码中使用charCodeAt(0)的原因 #

回调的入参x是字符串按索引取出的单个字符，本身是长度为1的字符串。charCodeAt方法接收一个索引参数，会返回字符串指定索引位置字符的Unicode编码。
因为x本身长度只有1，所以参数传0就是取它本身的字符对应的Unicode编码，最终得到的结果数组就是原字符串所有字符的Unicode编码集合。如果不用这个方法，回调直接返回x的话，最终结果就是原字符串拆成的单个字符数组，和"Muhammad asif".split('')效果一致。

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