javascript - 数组方法中关于 'thisArg' 的混淆

Question

我正在学习数组方法，有一件事我不太明白，可能与闭包有关。

首先，这是代码片段:

let range = {
    minNumber: 20,
    maxNumber: 30,
    isValid(number) {
        return number >= this.minNumber && number < this.maxNumber;
    }
};
    
let numbers = [16, 23, 27,  30, 45];
    
let filteredNumbers = numbers.filter(range.isValid, range);
    
console.log(filteredNumbers.length); // 2
console.log(filteredNumbers[0]); // 23
console.log(filteredNumbers[1]); // 27

根据我的理解，通过传递第二个参数，我们将 this 绑定(bind)到 range，否则只需调用:numbers.filter(range.isValid)将使 this 未定义。不管怎样，它不应该访问 this 吗？因为我们使用 从 range 上下文中“调用”isValid。 运算符？

还有第二种有效的方法:

numbers.filter(number => range.isValid(number))

这是怎么回事？现在它可以突然从 range 对象中获取 this 了吗？箭头函数没有 this iirc，所以不是那样的。

感谢您提前提供的所有帮助。 :)

Answer 1

我的理解是，当你打电话时

numbers.filter(range.isValid)

您实际上正在做的是通过引用传递函数或

numbers.filter(isValid(number) {
    return number >= this.minNumber && number < this.maxNumber;
  })

实际上，上下文没有被传输(例如 maxNumber 和 minNumber 没有在任何地方设置。)

当你这样做

numbers.filter(number => range.isValid(number))

它之所以有效，是因为 => 函数没有建立上下文，因此它从当前范围内的范围定义中获取上下文。

当你这样做

numbers.filter(range.isValid, range)

您正在使用下面描述的 .filter 的可选参数(来自此处的 W3C 文档: https://www.w3schools.com/jsref/jsref_filter.asp )

Optional. A value to be passed to the function to be used as its "this" value. If this parameter is empty, the value "undefined" will be passed as its "this" value