淺談arguments與arguments的妙用

1.每一個函數都有一個arguments屬性，表示函數的實參集合，這裏的實參是重點，就是執行函數時實際傳入的參數的集合。

2.arguments不是數組而是一個對象，但它和數組很類似，因此一般稱爲類數組對象，之後看到類數組其實就表示arguments。

3.arguments有length屬性，能夠用arguments[length]顯示調用：

 1 function func(){
 2      for(var i=0;i<arguments.length;i++){
 3          console.log(arguments[i]);
 4     }      
 5 }
 6 
 7 func("a",17,[1,2,3],{name:"javascript",type:"language"});
 8 
 9 /*
10 a
11 17
12 [1, 2, 3]
13 {name: "javascript", type: "language"}
14 */

4.Array.prototype.slice.call(arguments):

首先咱們看看call是幹啥的，舉個例子：

 

 1 var obj1={
 2     name:"java"
 3 }
 4 
 5 window.name="javascript";
 6 var func=function(){
 7     console.log(this.name);
 8 }
 9 
10 func();  //javasript
11 func.call(obj1); //java

咱們能夠很清楚的看到，call的一個做用是能夠改變函數運行的做用域，func中的this指向了obj1，（call和apply的其餘做用請參閱js中call和apply的用法）

 那Array.prototype.slice.call(arguments)是幹啥的呢，首先咱們猜想Array.prototype.slice是一個方法，將它call(arguments)以後，Array.prototype.slice中的this就指向了arguments對象了。

其實Array.slice是一個數組複製函數，它接受兩個參數(strat,[end]);從下標爲start複製到下標爲end，舉個栗子：

1 var numArr=[1,2,3,4,5];
2 console.log(numArr.slice(0,4)); //[1,2,3,4]
3 console.log(numArr.slice()); //[1,2,3,4,5]
4 console.log(numArr.slice(1)) //[2,3,4,5]

咱們能夠大膽的猜想一下slice函數的內部實現：參閱http://www.cnblogs.com/littledu/archive/2012/05/19/2508672.html

1 Array.prototype.slice = function(start,end){
2       var result = new Array();
3       start = start || 0;
4       end = end || this.length; //this指向調用的對象，當用了call後，可以改變this的指向，也就是指向傳進來的對象，這是關鍵
5       for(var i = start; i < end; i++){
6            result.push(this[i]);
7       }
8       return result;
9 }

 注意當中的result.push(this[i]),當Array.prototype.slice.call(arguments)後，就變成了result.push(arguments[i])，這樣就將arguments轉成了一個實實在在的數組了。

 

5.小練習:

一個給對象添加屬性的函數。

思考一下：首先得傳入一個實參，這個實參是要被添加屬性的對象。

剩下的參數是屬性鍵值對，能夠用對象表示：

 1 var obj={};
 2 //先看執行函數
 3 function addProp(){
 4      var obj=[].shift.call(arguments);   //shift()函數是將數組的第一個值刪除，並返回,這裏是獲得obj
 5      var propArray=[].slice.call(arguments); //此時的argument[0]已被刪除，因此propArray=[{name:"gao",age:"18"},{setName:function(name){this.name=name;}]
 6      for(var i in propArray){
 7       //prop[0]={name:"gao",age:"18"}
 8       //prop[1]={setName:function(name){this.name=name;}
 9        for(var j in propArray[i]){
10             obj[j]=propArray[i][j];
11             //obj[name]="gao"
12             //obj[age]="18"
13             //obj[setName]=function(name){this.name=name;}
14        }
15     }
16 }
17 
18     //執行函數
19     addProp(obj,{name:"gao",age:"18"},{setName:function(name){
20         this.name=name;
21     }});
22     console.log(obj.name);  //gao
23     obj.setName("xiang");
24     console.log(obj.name);  //xiang