JS arguments对象|极客笔记

JS arguments对象

在 JavaScript 中，每个函数都有一个特殊的内置对象 arguments。这个对象包含了函数被调用时传递给它的所有参数，它允许我们在函数内部访问和操作这些参数。本文将详细介绍 arguments 对象的特性和用法。

1. arguments对象的基本概念和用法

在 JavaScript 函数内部，我们可以通过 arguments 对象来访问函数的参数。无论函数声明时是否定义了参数，arguments 对象都会存在并可用。它是一个类数组对象，它具有 length 属性和按索引访问参数的能力。

下面是一个简单的示例，展示了如何使用 arguments 对象来访问函数的参数：

function greet(name) {
  console.log(`Hello, ${arguments[0]}!`);
}

greet("Alice");
// Output: Hello, Alice!

在上面的示例中，我们定义了一个名为 greet 的函数，它接受一个参数 name。在函数体内部，我们使用了 arguments[0] 来访问第一个参数，然后将其插入到打印输出的字符串中。

需要注意的是，虽然我们在函数声明中只定义了一个参数 name，但是我们可以通过 arguments 对象来访问到其他参数。这使得我们可以接受任意数量的参数。

function sum() {
  let total = 0;
  for (let i = 0; i < arguments.length; i++) {
    total += arguments[i];
  }
  return total;
}

console.log(sum(1, 2, 3, 4, 5));
// Output: 15

在这个示例中，我们定义了一个 sum 函数，它没有明确指定参数。我们在函数体内使用了 arguments.length 来获取传递给函数的参数数量，然后通过遍历 arguments 对象中的每个参数来计算它们的总和。

arguments 对象是一个可变的对象。这意味着我们可以通过改变函数声明中的参数值，来修改 arguments 对象中的对应参数值。这可能会对函数的行为产生影响，需要小心处理。

function changeName(name) {
  name = "Bob";
  console.log(arguments[0]);
}

changeName("Alice");
// Output: Alice

在上面的示例中，我们将参数 name 的值更改为 “Bob”。然而，当我们通过 arguments[0] 来访问第一个参数时，我们发现它并没有被修改，仍然是 “Alice”。

2. arguments对象的特性

除了基本的访问参数的能力之外，arguments 对象还有一些其他有用的特性。

2.1 length属性

arguments 对象有一个名为 length 的属性，用于获取传递给函数的参数数量。

function countArguments() {
  console.log(arguments.length);
}

countArguments(1, 2, 3);
// Output: 3

在上面的示例中，我们定义了一个名为 countArguments 的函数，并在函数体内使用了 arguments.length 来获取传递给该函数的参数数量。

需要注意的是，arguments.length 返回的是实际传递给函数的参数数量，而不是函数声明中定义的参数数量。

2.2 callee属性

arguments 对象有一个名为 callee 的属性，它是一个指向当前正在执行的函数的指针。

function factorial(n) {
  if (n === 0) {
    return 1;
  }
  return n * arguments.callee(n - 1);
}

console.log(factorial(5));
// Output: 120

在上面的示例中，我们定义了一个名为 factorial 的函数，它使用了递归调用自身来计算阶乘。我们通过 arguments.callee 来引用当前正在执行的函数，并将其作为递归调用的一部分。

需要注意的是，callee 属性是一个在严格模式下被禁止使用的特性。在严格模式下，访问 arguments.callee 会抛出错误。

2.3 caller属性

arguments 对象还有一个名为 caller 的属性，它是一个指向调用当前函数的函数的引用。

function innerFunction() {
  console.log(innerFunction.caller);
}

function outerFunction() {
  innerFunction();
}

outerFunction();
// Output: function outerFunction() { innerFunction(); }

在上面的示例中，我们定义了一个名为 innerFunction 的函数，它在函数体内使用 console.log 来访问 innerFunction.caller 属性。然后，我们定义了一个名为 outerFunction 的函数，并在函数体内调用了 innerFunction。最后，我们调用了 outerFunction，从而触发了 innerFunction 的调用。

需要注意的是，caller 属性在严格模式下被禁止使用，访问 arguments.caller 会抛出错误。

3. arguments对象的限制

arguments 对象虽然有它的用处，但它也有一些限制。

3.1 不能使用数组方法

arguments 对象虽然类似于数组，但它并不是一个真正的数组。因此，我们不能使用数组方法（如 Array.prototype.forEach、Array.prototype.map 等）来处理它。

function printArguments() {
  arguments.forEach((arg) => console.log(arg));
  // TypeError: arguments.forEach is not a function
}

printArguments(1, 2, 3);

在上面的示例中，我们尝试在 arguments 对象上使用 forEach 方法来打印每个参数的值。然而，这会抛出一个类型错误，因为 arguments 对象上没有定义 forEach 方法。

要解决这个问题，我们可以将 arguments 对象转换为一个真正的数组，然后再使用数组方法。

function printArguments() {
  Array.from(arguments).forEach((arg) => console.log(arg));
}

printArguments(1, 2, 3);
// Output:
// 1
// 2
// 3

在上面的示例中，我们使用 Array.from 方法将 arguments 对象转换为一个真正的数组，然后我们可以使用数组方法 forEach 来处理它。

3.2 没有继承自 Array

arguments 对象看起来像一个数组，但它并不是从 Array 对象继承的。它只是一个类数组对象，它有一个 length 属性和按索引访问的能力。

function checkType() {
  console.log(arguments instanceof Array);
}

checkType(1, 2, 3);
// Output: false

在上面的示例中，我们定义了一个名为 checkType 的函数，并在函数体内使用 arguments instanceof Array 来检查 arguments 对象是否是一个数组。然而，我们发现它返回的是 false，表示 arguments 对象不是一个数组。

尽管 arguments 对象不是一个数组，但我们仍然可以通过索引来访问它的元素。这使得我们可以像处理数组一样遍历和操作参数。

function sum() {
  let total = 0;
  for (let i = 0; i < arguments.length; i++) {
    total += arguments[i];
  }
  return total;
}

console.log(sum(1, 2, 3));
// Output: 6

在上面的示例中，我们定义了一个 sum 函数，它接受任意数量的参数。我们使用 arguments.length 来获取传递给函数的参数数量，并通过遍历 arguments 对象来计算它们的总和。

3.3 不受箭头函数影响

箭头函数在 ES6 中引入，它具有简洁的语法和特定的行为。然而，箭头函数不会创建自己的 arguments 对象，而是继承外部函数的 arguments 对象。

function sum() {
  const add = () => {
    let total = 0;
    for (let i = 0; i < arguments.length; i++) {
      total += arguments[i];
    }
    return total;
  };
  return add();
}

console.log(sum(1, 2, 3));
// Output:
// In strict mode: ReferenceError: arguments is not defined
// In non-strict mode: 6

在上面的示例中，我们定义了一个 sum 函数，它内部定义了一个箭头函数 add。在 add 函数内部，我们尝试使用 arguments 对象来访问外部函数 sum 的参数，然后计算它们的总和。

然而，由于箭头函数没有自己的 arguments 对象，上述代码在严格模式下会抛出错误。在非严格模式下，它会正确运行并输出。

4. arguments对象和剩余参数

在 ES6 之前，JavaScript 中可以使用 arguments 对象来处理不确定数量的参数。然而，ES6 引入了剩余参数（rest parameters），提供了更简洁和灵活的方式来处理可变参数。

剩余参数允许我们在函数声明中指定一个以三个点 ... 开头的参数名，用于捕获传递给函数的剩余参数，并将它们封装成一个真正的数组。

function sum(...numbers) {
  let total = 0;
  for (let i = 0; i < numbers.length; i++) {
    total += numbers[i];
  }
  return total;
}

console.log(sum(1, 2, 3));
// Output: 6

在上面的示例中，我们使用剩余参数 ...numbers 来接受函数的不确定数量的参数。在函数体内，我们可以像处理数组一样遍历和操作参数。

相较于 arguments 对象，剩余参数具有以下优点：