天天看點

js的arguments到底是什麼

類數組對象:arguments

  總所周知,js是一門相當靈活的語言。當我們在js中在調用一個函數的時候,我們經常會給這個函數傳遞一些參數,js把傳入到這個函數的全部參數存儲在一個叫做arguments的東西裡面,那麼這到底是什麼東西?

  在js中萬物皆對象,甚至數組字元串函數都是對象。是以這個叫做arguments的東西也是個對象,而且是一個特殊的對象,它的屬性名是按照傳入參數的序列來的,第1個參數的屬性名是’0’,第2個參數的屬性名是’1’,以此類推,并且它還有length屬性,存儲的是目前傳入函數參數的個數,很多時候我們把這種對象叫做類數組對象。類數組對象和數組都是對象這個媽生的,但是數組是大哥比類數組對象多了很多其他的玩具(方法),類數組對象隻是長得很像數組的弟弟而已。

  慢着,剛剛不是說數組也是對象嗎,現在這個類數組對象又是什麼? 沒辦法,js就是這麼的靈活。這個類數組對象不僅存儲給函數傳入的參數,也具有一些其他的屬性,等下會一一道來。

  因為類數組對象和數組有很多的共性,是以我們經常可以用call方法,讓類數組對象也使用的數組的一些方法,就是讓這個弟弟去玩哥哥的玩具,比如……,還是不扯遠了,這篇文章隻是說什麼是arguments,想知道更多關于對象如何借調數組方法的話,請參考這篇文章。

arguments的屬性

接下來我們來看看arguments對象裡面到底有些什麼東西,是騾子是馬拉出來溜溜。

function showargs() {
    console.log( arguments );
}

showargs(,,,,);
           

下面我們用console.log的方式,将arguments對象輸出到控制台,這裡不得不說一句,chrome的console工具好用得不得了(我不是來打廣告的)。

js的arguments到底是什麼

這裡我們可以看到arguments對象将我傳入的五個參數以數組的形式儲存在裡面,還有儲存了我傳入函數的實參的個數(length)。而且我們可以看到arguments對象的 ==_ proto _== 是指向object的,這也說明了他是個類數組對象,而不是一個數組。

有了這個對象我們以後寫函數的時候,就不用給所有的形參指定參數名,然後通過參數名的方式擷取參數了,我們可以直接使用arguments對象來擷取實參,這樣是不是友善了很多呢。

有些語言在我們給函數指定了參數名之後,當調用函數時,會判斷目前傳入的參數是否與函數定義的參數個數相等,不相等就會報錯,但是靈活的js(不是我說,js是真的靈活)并不會驗證傳遞給函數的參數個數是否等于函數定義的參數個數。是以為了裝逼(代碼的簡潔度),我們使用arguments調用參數可以不混淆不同函數之間的參數名。另外為了裝逼(代碼的嚴整度),我們也能用arguments來判斷目前傳入參數的個數是否與我們需要的數量一緻。

下面舉個栗子:

function add() {
    if( arguments.length ==  ){
        return arguments[] + arguments[];
    }else{
        return '傳入參數不合法';
    }
}

console.log( add(,) );
console.log( add(,,) );
           

看看結果:

js的arguments到底是什麼

最後我們還可以看到arguments還有一個叫做callee的屬性,這個屬性是表示的是目前函數的一個引用,簡單點說,這個屬性裡面存儲的我們調用的這個函數的代碼,實在無法了解的時候,又到了console.log大顯身手的時候了。

function showcallee() {
    var a = '這裡是代碼';
    var b = '這是另一段代碼';
    var c = a + b;

    console.log(arguments.callee);

    return c;
}
showcallee();
           
js的arguments到底是什麼

看到結果的你是不是和我一樣驚呆了呢,這不就是我寫的代碼嗎,arguments.callee完完整整的把這個函數的這段代碼傳回了。

arguments的一些妙用

1.利用arguments實作方法的重載

下面我們利用arguments對象來實作一個參數相加的函數,不論傳入多少參數都行,将傳入的參數相加後傳回。

function add() {
    var len = arguments.length,
        sum = ;
    for(;len--;){
        sum += arguments[len];
    }
    return sum;
}

console.log( add(,,) );   //6
console.log( add(,) );     //4
console.log( add(,,,,,,) );   //26
           

由于js是一種弱類型的語言,沒有重載機制,當我們重寫函數時,會将原來的函數直接覆寫,這裡我們能利用arguments,來判斷傳入的實參類型與數量進行不同的操作,然後傳回不同的數值。

2.利用arguments.callee實作遞歸

先來看看之前我們是怎麼實作遞歸的,這是一個結算階乘的函數

function factorial(num) { 
    if(num<=) { 
        return ; 
    }else { 
        return num * factorial(num-); 
    } 
} 
           

但是當這個函數變成了一個匿名函數時,我們就可以利用callee來遞歸這個函數。

function factorial(num) { 
    if(num<=) { 
        return ; 
    }else { 
        return num * arguments.callee(num-); 
    } 
} 
           

這個方法雖然好用,但是有一點值得注意,ECMAScript4中為了限制js的靈活度,讓js變得嚴格,新增了嚴格模式,在嚴格模式中我們被禁止不使用var來直接聲明一個全局變量,當然這不是重點,重點是arguments.callee這個屬性也被禁止了。不過這都不是事兒,ES6為我們新增了很多好用的變量聲明方式和新的文法糖,作為一個時髦的前端,我們趕緊學習一些ES6的新文法吧。

【原文連結】:https://blog.csdn.net/qq_16339527/article/details/53231725