js中arguments詳解

 

 

image.png

一、簡介

瞭解arguments這個對象之前先來認識一下javascript的一些功能：
其實Javascript並沒有重載函數的功能，但是Arguments對象能夠模擬重載。Javascrip中每個函數都會有一個Arguments對象實例arguments，它引用着函數的實參，可以用數組下標的方式"[]"引用arguments的元素。arguments.length爲函數實參個數，arguments.callee引用函數自身。

 

image.png

 

 

image.png

 

arguments.callee與形參是一一映射

 

 

image.png

 

image.png

二、特點

1.arguments對象和Function是分不開的。

2.因爲arguments這個對象不能顯式創建。

3.arguments對象只有函數開始時纔可用。

三、使用方法

雖然arguments對象並不是一個數組（類數組），但是訪問單個參數的方式與訪問數組元素的方式相同

例如：
arguments[0],arguments[1],。。。arguments[n]； 在js中 不需要明確指出參數名，就能訪問它們

例如：

function test() {
        var s = "";
        for (var i = 0; i < arguments.length; i++) {
            alert(arguments[i]);
            s += arguments[i] + ",";
        }
        return s;
}
test("name", "age");

輸出結果：
name,age

我們知道每一個對象都有自己的屬性，arguments對象也不例外，首先arguments的訪問猶如Array對象一樣，用0到arguments.length-1來枚舉每一個元素。下面我們來看看callee屬性，返回正被執行的** Function** 對象，也就是所指定的 Function 對象的正文。callee 屬性是 arguments 對象的一個成員，僅當相關函數正在執行時纔可用。callee 屬性的初始值就是正被執行的** Function** 對象。實現匿名的遞歸函數。代碼如下：

var sum = function (n) {
        if (1 == n) {
            return 1;
        } else {
            return n + arguments.callee(n - 1); //6 5 4 3 2 1
        }
   }
   alert(sum(6));

輸出結果：21

通俗一點就是，arguments此對象大多用來針對同個方法多處調用並且傳遞參數個數不一樣時進行使用。根據arguments的索引來判斷執行的方法。

知識擴展：

當使用arguments進行函數傳遞時，有一些需要注意的點。例子如下：

var length = 10;
function fn() {
  console.log(this.length);
}

var obj = { 
  method: function(fn) {
    fn();
    arguments[0]();
  }
};

obj.method(fn, 1); 

輸出：10,2

這裏有2個需要注意的點。fn函數裏面的this的指向：

1.第一個值爲10，執行的是method裏面的第一行"fn()",這裏this指向的window。所以輸出的值爲最外層定義的length。

2.第二個值爲2，執行的是method裏面的第二行"arguments0"（arguments0 => fn() ），這裏this執行的是arguments這個對象,所以輸出值爲arguments的長度

arguments 的用法和特性基本就是這麼多了。可能callee屬性用到的比較少。但是如果自己封裝或者寫一些js的時候 除了callee的東西基本都會用到。有不對的地方希望朋友們多多支出。大家共同進步。

傳多個參數事可以直接用argument，比如求最大值：

 function max() {
        var max = arguments[0];
        console.log(arguments)

        for (val of arguments) {
            if (val >= max) {
                max = val;
            }
        }
        return max;
    }
    var maxValue = max('9', 1, 2, 4)
    console.log(maxValue)