为何箭头函数中arguments为undefined？如何获取其上下文数据？

这是个很常见的疑问，核心原因在于箭头函数的设计特性：箭头函数不会绑定自己的arguments对象，它没有属于自己的这个特殊对象。

而普通函数（函数声明、函数表达式）在调用时，会自动创建并绑定一个arguments对象，包含了调用时传入的所有参数、作用域信息等，所以你执行这段代码时能拿到预期的结果：

var func = function() { console.log(arguments); }
func(1, 2); // 输出包含1、2等信息的Arguments对象

但箭头函数不同，它会尝试从外层作用域继承arguments，如果外层是全局作用域，那全局作用域下本来就没有arguments（严格模式下更是如此），所以直接调用箭头函数时就会抛出arguments is not defined的错误。

如何从箭头函数中获取上下文数据（参数）？ #

有两种常用且推荐的方式：

1. 使用剩余参数（Rest Parameters）语法 #

这是最标准、最灵活的方案，剩余参数会把所有传入的参数收集成一个真正的数组，比arguments的类数组对象好用得多：

const func = (...args) => {
  console.log(args); // 传入的参数会变成数组，比如调用func(1,2,3)会输出 [1,2,3]
};
func(1, 2, 3);

剩余参数是ES6引入的特性，它的优势在于：

• 是真正的数组，可以直接使用map、forEach、filter等数组方法
• 可以明确指定要收集的参数（比如(first, ...rest)只收集第一个参数之外的剩余部分）

2. 从外层普通函数继承arguments（特殊场景） #

如果你的箭头函数嵌套在一个普通函数内部，它会自动继承外层普通函数的arguments对象，比如：

const outerFunc = function(a, b) {
  const innerArrow = () => {
    console.log(arguments); // 这里的arguments是outerFunc的，包含a和b的值
  };
  innerArrow();
};
outerFunc(10, 20); // 输出Arguments(2) [10, 20, ...]

不过这种方式只适合特定的嵌套场景，一般不推荐作为常规方案，剩余参数是更通用的选择。

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