JavaScript中arguments作用域疑问：foo内为何返回3而非1

先看完整代码：

var arguments = [1,2,3];
var arr=()=>arguments[0];

console.log(arr()); // 返回1

function foo(n){
    console.log(arguments[0]); // 返回3，而非全局定义的1
    var f=()=>arguments[0]+n;
    return f();
}

console.log(foo(3)); // 返回6

核心原因：普通函数与箭头函数对arguments的处理逻辑不同 #

• 普通函数里的arguments是自身专属的内置对象
  foo是普通函数，它内部的arguments是JS为每个普通函数自动创建的局部对象，专门存储调用该函数时传入的参数。当你调用foo(3)时，这个arguments就是包含参数3的类数组集合，所以arguments[0]必然是3，和全局作用域里定义的var arguments = [1,2,3]没有任何关系。

• 箭头函数没有自己的arguments，会继承外层作用域的arguments

  • 第一个箭头函数arr的外层是全局作用域，所以它使用的arguments是全局定义的那个数组[1,2,3]，因此arr()返回1。
  • foo内部的箭头函数f，外层作用域是foo函数的作用域，所以它继承的是foo自身的arguments（也就是存储了3的那个对象）。同时n是foo的参数，值为3，所以arguments[0]+n就是3+3=6，最终foo(3)返回6。

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