为什么在这段代码片段中箭头函数的外部作用域是“showList”而不是“forEach”？

Question

下面是这个现代 JavaScript 教程的代码片段：

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

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

group.showList();

本教程尝试this用箭头函数进行解释，它说：

这里的forEach中，使用了箭头函数，因此this.title与外部方法showList中的完全相同。即：group.title。

我们知道this箭头函数是按词法确定的。所以作用域链应该是：

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

在这种情况下，箭头函数的外部作用域应该forEach代替showList。因此thisin 箭头函数与 in 完全相同forEach，这应该是undefined因为没有thisArg传递 to forEach。但事实上，this是group，这意味着它与 中完全相同showList。那么，在这种情况下似乎forEach没有范围？我很困惑。

Answer 1

\n

所以作用域链应该是：

\n\n

global--> showList-->forEach-->arrow function\n

\n

\n\n

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

\n\n

没有“forEach范围”。这只是一个函数调用。就像调用的参数列表没有范围一样alert(\xe2\x80\xa6)。您的示例中只有三个范围：

\n\n

global --> showList --> anonymous arrow function\n

\n\n

还有调用堆栈，概述了哪些函数调用导致了当前代码的执行。这确实包含forEach，它正在调用箭头函数，而箭头函数又将调用该alert函数。但这与 JavaScript 中的作用域不对应（在学习闭包时您会看到更多示例），这就是为什么 JavaScript 被称为具有词法作用域而不是动态作用域（其中标识符根据函数所在的位置动态解析）称为）。

\n