javascript - 'this' 关键字在 map() 和 call() 中如何工作？

Question

我一直在刷新我对 NodeList 上的 call() 和 map() 用法的 JavaScript 知识。

用谷歌搜索很容易，call() 应该做什么，并且有资源示例说明它如何与 map() 一起工作。

然而，正如我在 MDN 上注意到的那样，map() 函数也可以接受第二个参数，它应该为 map( ) - 或者至少我认为它应该这样做。

我自己尝试用简单的数组来检查它:

var numbers = [1, 2, 3];
var letters = ['a', 'b', 'c'];

..还有一个简单的函数，即将作为参数提供给 map():

var effector = function (x) {
    console.log(x);
}

现在，我不明白的是为什么这两个函数调用有不同的结果:

numbers.map(effector, letters);
numbers.map.call(letters, effector);

我希望它们都向控制台输出字母，因为两个 this 关键字都应该引用它们(分别引用它们的对象)。

我做了一些进一步的研究，并尝试使用这个修改后的效应器函数:

var effector = function () {
    console.log(this);
}

..再次:

numbers.map(effector, letters);
numbers.map.call(letters, effector);

假设，我们在“use strict”中，第一个调用记录letters，第二个记录undefined。

但同样，我希望这两个调用产生相同的输出。

我错过了什么？

编辑:

我在读，如何对 .map 进行 polyfill，如果你在 MDN 上查看它，你会看到，.map 的第二个参数是如何在 callback.call() 中使用的。

我想，最终，即使 callback.call() 也应该具有与 .map 中相同的 this。

MDN - map

Answer 1

这里有两个 this 引用的绑定(bind):

• this 为 map 函数的执行上下文
• this为回调函数的执行上下文

它们彼此不相关。

map 的第二个参数指示回调的this 是什么。如果未提供，则默认为 undefined(不是数组)。

map.call 的第一个参数规定了 this 对 map 的作用——以及迭代哪个数组的结果。

这也反射(reflect)在 polyfill 中mdn 上提供:它完全符合这些规范:O 为 map 函数获取 this 的值，而 T 获取回调的 this 的值。它们通常是不同的。

map 与 forEach

与您的问题无关，但值得一提:当您实际上没有映射 任何东西时，不要使用map。 map 旨在创建一个新数组，其中每个值都已通过在同一索引处对原始值调用回调函数进行映射。

然而，如果您只需要迭代数组值，而不打算执行此类映射，则使用 forEach 方法或 for...of 循环.这两个都可以开箱即用地在 NodeList 上工作，无需 .call。