为何Array.prototype.filter中this与arr表现存在差异？

核心差异本质 #

filter回调的第三个参数arr是调用filter的原数组的直接引用（这里就是words），而this的指向完全取决于函数类型和filter的调用方式：

• 箭头函数：不绑定自身this，继承外层作用域的this（全局环境下就是全局对象：浏览器的window/Node.js的global）。
• 普通函数：若filter未传入第二个参数thisArg，非严格模式下this指向全局对象，严格模式下为undefined。

为什么结果会多一个undefined extra？ #

你的代码中，用arr时是直接修改原数组words，而用this时实际是在修改全局对象的属性，而非words：

1. 当使用arr[index+1] += ' extra'：
   • arr就是words，修改的是原数组的元素。filter会按原数组初始长度（6）遍历索引0-5，当index=5时，给words[6]赋值为undefined extra，但这个元素不会被加入filter返回的数组（因为undefined不存在length属性，不满足word.length>6的条件）。
2. 当使用this[index+1] += ' extra'：
   • 此时this是全局对象，你给全局对象添加了1、2...6这些数字属性，每个属性值都是undefined extra（因为全局对象原本没有这些属性，初始值为undefined）。你看到的多出来的undefined extra就是全局对象的6属性值，和原数组words无关。

如何让this指向原数组？ #

如果想让this指向words，只需给filter传入第二个参数作为thisArg：

let newWordsThisFunc = words.filter(function(word, index) {
    this[index + 1] += ' extra';
    return word.length > 6;
}, words) // 传入words作为this的指向

此时this就和arr一样指向原数组words，结果会和第一个版本完全一致。

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