JavaScript数组filter()箭头函数回调如何使用上下文参数访问this

箭头函数不存在自身的this绑定，它的this是在定义时就从外层词法作用域继承的，完全不会被filter()方法传入的第二个上下文参数修改。你写的箭头函数回调里，this指向的是外层全局作用域（浏览器环境下是window，Node环境下是global），this.lower和this.upper都是undefined，所有年龄判断条件都返回false，最终筛选结果就是空数组。

你可以根据实际编码需求二选一：

• 坚持使用箭头函数：放弃通过this取上下文的写法，直接访问作用域内的range对象即可，这也是箭头函数的推荐使用方式：

let teenagers = peoples.filter((people) => {
  return people.age >= range.lower && people.age <= range.upper
})
console.log(teenagers) // 可正常筛选出符合年龄区间的人员

• 需要动态绑定上下文、通过this访问参数：不要使用箭头函数，换回普通函数作为回调，filter的第二个参数会自动把回调内的this绑定到传入的range对象上，也就是你最初可正常运行的写法：

let teenagers = peoples.filter(function(people){
  return people.age >= this.lower && people.age <= this.upper
}, range)

注意：不止filter，所有数组遍历方法（map/forEach/find/some/every等）的第二个thisArg参数，都仅对普通函数回调生效，对箭头函数无效，这是ES6箭头函数的固有语法特性。

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