为何这段JavaScript箭头函数执行后返回结果6？

这段代码返回6而非预期的4，核心原因在于箭头函数不拥有独立的arguments对象，它会继承外层非箭头函数的arguments引用。

具体执行细节 #

1. 全局作用域中声明的var arguments = [1, 2, 3];并没有被箭头函数用到——在普通函数（非箭头）内部，arguments是JS引擎内置的类数组对象，指向当前函数被调用时传入的参数列表，它会覆盖全局同名变量。
2. 当调用foo(3)时，foo内部的arguments是仅包含3的类数组对象（因为只传入了一个参数），因此arguments[0]的值为3。
3. 箭头函数f没有自己的arguments，它会沿着作用域链向上查找，最终获取到foo函数的arguments，所以计算式arguments[0] + n实际是3 + 3，结果为6。

修正方案 #

如果想要得到预期的4，可以通过以下方式调整：

方式一：明确引用全局arguments #

var arguments = [1, 2, 3];
function foo(n) {
  var f = () => window.arguments[0] + n; 
  return f();
}
console.log(foo(3)); // 输出4

方式二：避免使用arguments作为变量名（更推荐） #

arguments在普通函数中有特殊含义，用它做全局变量名很容易引发混淆，建议重命名：

var myArgs = [1, 2, 3];
function foo(n) {
  var f = () => myArgs[0] + n; 
  return f();
}
console.log(foo(3)); // 输出4

内容的提问来源于stack exchange，提问作者Anoop Lamba