JavaScript arguments对象与...args有什么区别

一、数据结构与原型链机制的根本差异

在早期的 ECMAScript 标准中，每个由 function 关键字定义的普通函数作用域内，都会自动注入一个名为 arguments 的局部变量。从表面上看，它拥有从 0 开始的数字索引和 length 属性，可以像数组一样通过下标读取值，但它在原型链上直接继承自 Object.prototype，并不是真正的 Array。

相对地，ES6 规范引入的 ...args 属于标准形参声明。当解析器执行函数时，会将传递的参数打包封装为一个真正的数组实例，其内部原型指针指向 Array.prototype。

图 1：arguments 对象与 ...args 剩余参数的内部原型结构对比

因为缺乏 Array.prototype 链，当开发者尝试对 arguments 执行现代常见的函数式操作时，会直接抛出类型异常：

function testArguments() {
  console.log(Array.isArray(arguments)); // 输出: false
  // arguments.map(x => x * 2); // 抛出错误: TypeError: arguments.map is not a function

  // 必须借用原型方法或先转换为数组
  const realArr = Array.prototype.slice.call(arguments);
  // 或 ES6 写法: const realArr = Array.from(arguments);
  return realArr.map(x => x * 2);
}

function testRest(...args) {
  console.log(Array.isArray(args)); // 输出: true
  // 直接原生使用数组方法
  return args.map(x => x * 2);
}

二、参数捕获范围与函数签名的清晰度

另一个常引起混淆的关键差异是它们所捕获参数的边界。

• arguments 是无差别的全局实参捕获器：无论函数签名定义了多少个形参，arguments 始终包含传入该函数的所有实参（从第 0 个到最后一个）。
• ...args 专职收集“剩余”实参：它只会将那些没有对应命名形参的多余实参打包进数组。因此剩余参数必须放在形参列表的最后一位，否则语法解析器会直接报 SyntaxError。

图 2：参数提取与分离解析流程对比

剩余参数使得函数的形参列表自成文档。后续接手代码的开发者只需看一眼函数签名，就能立刻知晓该函数接收前几个固定含义参数，后面可以继续追加多个同类选项。

三、箭头函数与作用域绑定行为

在 ES6 中，箭头函数（Arrow Function）被广泛使用。理解两者在箭头函数中的差异是避免运行时 Bug 的重中之重：

• 箭头函数没有自己的 arguments 对象。在箭头函数体内部如果直接访问 arguments，引擎会沿着词法作用域向上层普通函数查找。如果在全局作用域下的箭头函数中访问 arguments，在浏览器环境下会直接报 ReferenceError: arguments is not defined（在 Node.js 中会访问到包装模块的内置 arguments）。
• ...args 遵循标准词法声明，完全支持箭头函数。无论普通函数、对象方法、构造函数还是箭头函数，均能正常声明并使用剩余参数。

// 错误示例：箭头函数试图使用 arguments
const sumWrong = () => {
  // ReferenceError: arguments is not defined（在浏览器全局上下文中）
  return Array.from(arguments).reduce((a, b) => a + b, 0);
};

// 正确示例：箭头函数声明剩余参数
const sumCorrect = (...numbers) => {
  return numbers.reduce((total, n) => total + n, 0);
};

console.log(sumCorrect(1, 2, 3, 4)); // 输出: 10

四、严格模式与历史遗留特性解耦

在历史版本的 JavaScript 中，非严格模式下的 arguments 存在一个极具混淆性的特性：形参和 arguments 对象元素双向联动绑定。

function looseBinding(a) {
  a = 999;
  // 非严格模式下，arguments[0] 会同步被改变为 999
  console.log(arguments[0]); // 输出: 999
}

这种隐式同步使得 JavaScript 引擎的优化器很难对局部变量进行静态分析与寄存器分配。因此，在严格模式（"use strict"）以及使用 ES6 默认参数、解构赋值或剩余参数的函数内部，这种双向联动被彻底废弃，形参与参数集合完全独立。

此外，arguments 还挂载了 arguments.callee（指向当前正在执行的函数引用）和 arguments.caller。这两个属性在严格模式下均被禁用，调用时会直接报错。而 ...args 就是一个纯粹的数组变量，没有任何历史遗留包袱。

五、从 arguments 平滑迁移至 ...args 的标准操作步骤

在现代工程项目中，重构遗留代码库中的 arguments 可以大幅提升代码的可读性与运行时优化空间。以下是标准的重构实施步骤：

图 3：代码从 arguments 重构迁移至剩余参数的四步操作流程

重构实操示例对比

// ================= 重构前：传统 arguments 模式 =================
function logAndFormat(prefix) {
  // 必须手动借用 slice 去掉第一个 prefix 参数
  var items = Array.prototype.slice.call(arguments, 1);
  var formatted = items.map(function(item) {
    return prefix + ": " + item;
  });
  return formatted.join(" | ");
}

// ================= 重构后：现代 ...args 模式 =================
function logAndFormat(prefix, ...items) {
  // items 直接就是纯数组，天然支持 map 和模版字符串
  return items.map(item => `${prefix}: ${item}`).join(" | ");
}

六、核心差异矩阵与场景决策总结

为了在实际开发中快速建立判断标准，下表汇总了两者在各技术维度的核心区别：

图 4：现代 JavaScript 技术栈下的参数处理选型矩阵

综上所述，arguments 作为历史规范产物，在早期没有扩展运算符时解决了不定参数的接收问题；而 ...args 则是现代 ECMAScript 针对“类型纯净性”、“可读性”与“函数式编程”给出的标准化方案。在当前的工程实践中，推荐全面拥抱 ...args 剩余参数。