MDN的arguments详解

心已赠人 2023-02-12 07:23 4阅读 0赞

## 一、MDN的arguments详解 ##

**`arguments`** 是一个对应于传递给函数的参数的类数组对象。

## 语法 ##

arguments

## 描述 ##

`arguments`对象是所有（非箭头）函数中都可用的**局部变量**。你可以使用`arguments`对象在函数中引用函数的参数。此对象包含传递给函数的每个参数，第一个参数在索引0处。例如，如果一个函数传递了三个参数，你可以以如下方式引用他们：

arguments[0]
    arguments[1]
    arguments[2]

参数也可以被设置：

arguments[1] = 'new value';

**`arguments`对象不是一个 [`Array`][Array] **。它类似于`Array`，但除了length属性和索引元素之外没有任何`Array`属性。例如，它没有 [pop][] 方法。

比如以下实例，对arguments对象的使用：

**method方法打印的this为obj对象；fn方法打印的this为arguments对象。**

**但是它可以被转换为一个真正的`Array`：**

var args = Array.prototype.slice.call(arguments);
    var args = [].slice.call(arguments);
    
    // ES2015
    const args = Array.from(arguments);
    const args = [...arguments];

对参数使用slice会阻止某些JavaScript引擎中的优化 (比如 V8 - [更多信息][Link 1])。如果你关心性能，尝试通过遍历arguments对象来构造一个新的数组。另一种方法是使用被忽视的`Array`构造函数作为一个函数：

var args = (arguments.length === 1 ? [arguments[0]] : Array.apply(null, arguments));

如果调用的参数多于正式声明接受的参数，则可以使用`arguments`对象。这种技术对于可以传递可变数量的参数的函数很有用。使用 `arguments.length`来确定传递给函数参数的个数，然后使用`arguments`对象来处理每个参数。要确定函数[签名][Link 2]中（输入）参数的数量，请使用`Function.length`属性。

### 对参数使用 `typeof` ###

typeof参数返回 'object'。

console.log(typeof arguments);    // 'object'
    // arguments 对象只能在函数内使用
    function test(a){
        console.log(a,Object.prototype.toString.call(arguments));
        console.log(arguments[0],arguments[1]);
        console.log(typeof arguments[0]);
    }
    test(1);
    /*
    1 "[object Arguments]"
    1 undefined
    number
    */

可以使用索引确定单个参数的类型。

console.log(typeof arguments[0]); //this will return the typeof individual arguments.

### 对参数使用扩展语法 ###

您还可以使用[`Array.from()`][Array.from]方法或[扩展运算符][Link 3]将参数转换为真实数组：

var args = Array.from(arguments);
    var args = [...arguments];

## 属性 ##

`arguments.callee`

指向当前执行的函数。

`arguments.caller`

指向调用当前函数的函数。

`arguments.length`

指向传递给当前函数的参数数量。

`arguments[@@iterator]`

返回一个新的Array迭代器对象，该对象包含参数中每个索引的值。

注意:现在在严格模式下，`arguments`对象已与过往不同。`arguments[@@iterator]`不再与函数的实际形参之间共享，同时caller属性也被移除。

### ES6的剩余参数、默认参数和解构赋值参数 ###

剩余参数：用剩余形参y来接收过多的实参。

例如：x值1，y值为数组\[2,3,4\]

function func(x,...y){
                console.log(x);
                console.log(y);
            }
            func(1,2,3,4);

默认参数：如果函数没有传入给形参值（对应形参为实参），那么该形参就会取默认值。**（切记：arguments只与实参对应）**

例如：x的值为1，y的值为5

function func(x,y=5){
                console.log(x);
                console.log(y);
            }
            func(1);

结构赋值：

列如：x的值为1，y值为2

function func(x,y){
                console.log(x);
                console.log(y);
            }
            var arr = [1,2]
            func(...arr);

`arguments`对象可以与[剩余参数][Link 4]、[默认参数][Link 5]和[解构赋值][Link 6]参数结合使用。

function foo(...args) {
      return args;
    }
    foo(1, 2, 3);  // [1,2,3]

当非严格模式中的函数**没有**包含[剩余参数][Link 4]、[默认参数][Link 5]和[解构赋值][Link 6]，那么`arguments`对象中的值**会**跟踪参数的值（反之亦然）。看下面的代码：

function func(a) { 
      arguments[0] = 99;   // 更新了arguments[0] 同样更新了a
      console.log(a);
    }
    func(10); // 99

并且

function func(a) { 
      a = 99;              // 更新了a 同样更新了arguments[0] 
      console.log(arguments[0]);
    }
    func(10); // 99

当非严格模式中的函数**有**包含[剩余参数][Link 4]、[默认参数][Link 5]和[解构赋值][Link 6]，那么`arguments`对象中的值**不会**跟踪参数的值（反之亦然）。相反, `arguments`反映了调用时提供的参数：

function func(a = 55) { 
      arguments[0] = 99; // updating arguments[0] does not also update a
      console.log(a);
    }
    func(10); // 10

并且

function func(a = 55) { 
      a = 99; // updating a does not also update arguments[0]
      console.log(arguments[0]);
    }
    func(10); // 10

并且

function func(a = 55) { 
      console.log(arguments[0]);
    }
    func(); // undefined

# 【总结】 #

### 一、非严格模式下的特性 ###

**1、arguments对象与实参映射，通过arguments可以修改实参的值，反之亦然。**

**2、arguments.callee执行函数体；**

**3、函数的caller指向该函数的父级函数，arguments.callee.caller。需要注意的是，如果在全局作用域中调用当前函数，它的值null。**

function fatherFunc() {
                console.log(arguments.callee.caller);//fatherFunc在全局中调用，该值为null
                function func(x) {
                    console.log(arguments.callee.caller)//打印fatherFunc
                }
                func(1);
            }
    
            fatherFunc();

**4、必须有实参的传入，arguments只与实参建立联系。**

**实例1：x与arguments\[0\]无联系**

function fn(x){
       x = 10;
       arguments[0] = 20;
       console.log(x,arguments[0]); //x = 10; arguments[0] = 20;
    }
     fn();
     console.log(window.x);// undefined
     console.log(x);// x is not defined

**实例2：x与arguments\[0\]无联系**

function fn(x){
            arguments[0] = 20;
            console.log(x,arguments[0])
        }
        fn();
        // undefined  和 20

** 实例3：建立联系**

function fn(x){
            x = 10;                      
            arguments[0] = 20;
            console.log(x,arguments[0]); // 20 20
        }
        fn(1);

### 二、严格模式下的特性 ###

1、arguments对象和实参的修改，已经互不影响，即，在实参传入到函数中时，arguments的值与其相等，后续对arguments或对实参的修改，两者互不影响。

2、禁止使用arguments.callee和arguments.callee.caller函数的caller值。

'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions

### 三、ES6下的特性 ###

默认参数、剩余参数、结构赋值，会使函数的arguments也不再与实参相互影响。

[Array]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Array
[pop]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/pop
[Link 1]: https://github.com/petkaantonov/bluebird/wiki/Optimization-killers#3-managing-arguments
[Link 2]: https://developer.mozilla.org/zh-CN/docs/Glossary/Signature/Function
[Array.from]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/from
[Link 3]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Spread_operator
[Link 4]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/Rest_parameters
[Link 5]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/Default_parameters
[Link 6]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment