JavaScript Arrow function代码输出结果为6的运行原理求解

核心规则前置 #

箭头函数没有独立的arguments绑定，内部访问的arguments直接继承自外层最近的非箭头函数作用域的arguments值，若外层无普通函数，则取全局作用域下的arguments变量。

逐段代码解析 #

全局作用域段代码 #

var arguments = [1, 2, 3];
var arr = () => arguments[2];
console.log(arr());

• 箭头函数arr的外层是全局作用域，因此它访问的arguments就是全局定义的数组[1,2,3]
• 取索引2的元素值为3，因此第一个console.log输出3

foo函数段代码 #

function foo(n) {
  var f = () => arguments[0] + n;
  return f();
}
console.log(foo(3));

• foo是普通函数，调用foo(3)时，foo内部的arguments是实参集合，第一个实参为3，即arguments[0] = 3
• 箭头函数f定义在foo内部，它的arguments继承自foo的arguments，同时继承外层变量n的值3
• 计算arguments[0] + n得到3 + 3 = 6，因此第二个console.log输出6，也就是你观察到的输出结果6。

内容的提问来源于stack exchange，提问作者Deepak soni