javascript - 为什么在这个代码片段中箭头函数的外部范围是 `showList` 而不是 `forEach` ？

Question

所以这里是来自 modern JavaScript tutorial 的代码片段:

let group = {
  title: "Our Group",
  students: ["John", "Pete", "Alice"],

  showList() {
    this.students.forEach(
      student => alert(this.title + ': ' + student)
    );
  }
};

group.showList();

教程尝试解释 this在箭头函数中，它说:

Here in forEach, the arrow function is used, so this.title in it is exactly the same as in the outer method showList. That is: group.title.

我们知道 this在箭头函数中是根据词法确定的。所以范围链应该是:

global--> showList-->forEach-->arrow function

在这种情况下，箭头函数的外部范围应该是 forEach而不是 showList .因此 this在箭头函数中与 forEach 中的完全相同，应该是 undefined因为没有 thisArg传递给 forEach .但实际上， this是 group ，这意味着它与 showList 中的完全相同.
所以，似乎 forEach在这种情况下没有范围？我很困惑。

Answer 1

So the scope chain should be:

global--> showList-->forEach-->arrow function

我认为您对“范围”的含义感到困惑。它是一个变量范围，在代码中通常用大括号 {…} 分隔。 , 任何标识符总是引用同一个变量的区域。

没有“ forEach 范围”。这只是一个函数调用。就像 alert(…) 的参数列表没有范围一样称呼。您的示例中只有三个范围:

global --> showList --> anonymous arrow function

还有 call stack ，概述了哪些函数调用导致了当前代码的执行。这确实包含 forEach ，它正在调用箭头函数，该函数又将调用 alert功能。但这与 JavaScript 中的范围不对应(在学习闭包时会看到更多示例)，这就是为什么说 JavaScript 具有 lexical scope and not dynamic scope 的原因。 (根据调用函数的位置动态解析标识符)。