淺談javascript的Array.prototype.slice.call_javascript技巧

寫字前面

在js中我們常常會看到Array.prototype.slice.call(arguments,0)的寫法，當然，這個方法的作用也許大家都明白，那就是把類別數組物件轉換成一個真正的陣列。關於這個方法，我說說自己的理解。

這裡牽涉到slice()方法和call()方法，所以先簡單說說這兩個方法。

slice()方法

陣列和字串都有這個slice方法，這個方法的作用是截取一段資料。它接收兩個參數，第一個參數是要截取的位置索引，第二參數可選，表示要截取到的結束位置，但不包括結束位置。在數組中，該方法的傳回值是包含截取元素的組成的數組，在字串中，該方法的傳回值是包含截取字串組成的字串。

此方法也可以傳入負數值，當參數為負數的時候，將參數和陣列或字串的長度相加得到的正數作為實際的參數。

如下：

[1,2,3,4,5,6].slice(2,4);

[1,2,3,4,5,6].slice(-4,-2);

傳回值均為[3,4]，為數組。

'everything'.slice(2,4);

'everything'.slice(-4,-2);

傳回值分別為'er'和'hi'，為字串。

如果之傳入一個參數的話，那就是輸出從起始位置到結束位置的所有元素。不再舉例。

字串的其他類似方法

在字串中，和slice()方法類型的還有兩個方法：

substring()和substr()方法。

其中，substring()方法表示傳回從開始位置到結束位置的字串，substr()接收兩個參數，第一個參數表示開始位置，第二個參數表示要截取的字元個數，和前兩種方法略有不同。

當傳入方法的參數為負數時，這三種方法又略有不同。

當傳入方法的參數為負數時：

slice()像上面說的，是負數加上字串的長度得到對應的正值；

substring()方法的參數皆置為零；

substr()方法的第一個參數為負值加上字串長度所得到的正值，第二個參數置為零。

call()和apply()方法

call()和apply()方法主要是用來擴充函數的作用域。

call()和apply()方法接收兩個參數：

apply()：第一個參數是作用域，第二個是參數數組，其中第二個參數可以是數組實例，也可以是arguments物件。

call()方法也接收兩個參數，僅在於和apply()的傳參方式不同：傳遞函數的參數必須逐一寫入。

鑑於這裡不是重點，在這裡就不再贅述。

Array.prototype.slice.call(arguments,0)

在Array.prototype.slice.call(arguments,0)中，Array.prototype.slice呼叫的是Array的原型方法，對於正真的數組是有slice()方法，但是對於像arguments或自己定義的一些類別數組物件雖然存在著length等若干屬性，但是並沒有slice()方法，所以對於這種類別數組物件就得使用原型方法來使用slice()方法，即Array.prototype.slice（如果在自訂中的類別數組物件中自訂了slice()方法，那麼自然可以直接呼叫）。

所以，Array.prototype.slice.call(arguments,0)的意思就可以這樣理解：對於arguments類別數組，我們呼叫Array.prototype.slice原型方法，並用call()方法，將作用域限定在arguments中，這裡Array.prototype就可以理解為arguments，同參數0為slice()方法的第一個參數，即起始位置索引。透過這種方法就將arguments類別數組轉換成了真數組。

當然，把arguments轉換成陣列也可以用遍歷，那樣程式碼自然就會多一些，而且不夠直接。

我們知道，Array.prototype.slice.call(arguments)能將具有length屬性的物件轉成數組，除了IE下的節點集合（因為ie下的dom物件是以com物件的形式實現的，js物件與com物件不能進行轉換）
如：

 var a={length:2,0:'first',1:'second'};
 Array.prototype.slice.call(a);// ["first", "second"]
 var a={length:2};
 Array.prototype.slice.call(a);// [undefined, undefined]

可能剛開始學習js的童鞋並不是很能理解這句為什麼能實現這樣的功能。比如我就是一個，所以，來探究一下。

首先，slice有兩個用法，一個是String.slice,一個是Array.slice，第一個回傳的是字串，第二個回傳的是數組，這裡我們看第2個。

Array.prototype.slice.call(arguments)能夠將arguments轉成數組，那麼就是arguments.toArray().slice();到這裡，是不是就可以說Array.prototype.slice.call(arguments)的過程就是先將傳入進來的第一個參數轉為數組，再呼叫slice？
 
再看call的用法，如下例子

 var a = function(){
   console.log(this);  // 'littledu'
   console.log(typeof this);   // Object
   console.log(this instanceof String);  // true
 }
 a.call('littledu');

可以看出，call了后，就把当前函数推入所传参数的作用域中去了，不知道这样说对不对，但反正this就指向了所传进去的对象就肯定的了。
到这里，基本就差不多了，我们可以大胆猜一下slice的内部实现，如下

 Array.prototype.slice = function(start,end){
   var result = new Array();
   start = start || 0;
   end = end || this.length; //this指向调用的对象，当用了call后，能够改变this的指向，也就是指向传进来的对象，这是关键
   for(var i = start; i < end; i++){
      result.push(this[i]);
   }
   return result;
 }

大概就是这样吧，理解就行，不深究。

最后，附个转成数组的通用函数

var toArray = function(s){
  try{
    return Array.prototype.slice.call(s);
  } catch(e){
      var arr = [];
      for(var i = 0,len = s.length; i < len; i++){
        //arr.push(s[i]);
        arr[i] = s[i]; //据说这样比push快
      }
       return arr;
  }
}