寫(xiě)字前面

在js中我們經(jīng)常會(huì)看到Array.prototype.slice.call(arguments,0)的寫(xiě)法，當(dāng)然，這個(gè)方法的作用也許大家都明白，那就是把類(lèi)數(shù)組對(duì)象轉(zhuǎn)換成一個(gè)真正的數(shù)組。關(guān)于這個(gè)方法，我說(shuō)說(shuō)自己的理解。

這里涉及到slice()方法和call()方法，所以先簡(jiǎn)單說(shuō)說(shuō)這兩個(gè)方法。

slice()方法

數(shù)組和字符串都有這個(gè)slice方法，這個(gè)方法的作用是截取一段數(shù)據(jù)。它接收兩個(gè)參數(shù)，第一個(gè)參數(shù)是要截取的位置索引，第二參數(shù)可選，表示要截取到的結(jié)束位置，但是不包括結(jié)束位置。在數(shù)組中，該方法的返回值是包含截取元素的組成的數(shù)組，在字符串中，該方法的返回值是包含截取字符串組成的字符串。

該方法也可以傳入負(fù)數(shù)值，當(dāng)參數(shù)為負(fù)數(shù)的時(shí)候，將參數(shù)和數(shù)組或字符串的長(zhǎng)度相加得到的正數(shù)作為實(shí)際的參數(shù)。

如下：

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

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

返回值均為[3,4]，為數(shù)組。

'everything'.slice(2,4);

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

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

如果之傳入一個(gè)參數(shù)的話(huà)，那就是輸出從開(kāi)始位置到結(jié)束位置的所有元素。不再舉例。

字符串的其他類(lèi)似方法

在字符串中，和slice()方法類(lèi)型的還有兩個(gè)方法：

substring()和substr()方法。

其中，substring()方法表示返回從開(kāi)始位置到結(jié)束位置的字符串，substr()接收兩個(gè)參數(shù)，第一個(gè)參數(shù)表示開(kāi)始位置，第二個(gè)參數(shù)表示要截取的字符個(gè)數(shù)，和前兩個(gè)方法略有不同。

當(dāng)傳入方法的參數(shù)為負(fù)數(shù)時(shí)，這三種方法又略有不同。

當(dāng)傳入方法的參數(shù)為負(fù)數(shù)時(shí)：

slice()像上面說(shuō)的，是負(fù)數(shù)加上字符串的長(zhǎng)度得出相應(yīng)的正值；

substring()方法的參數(shù)均置為零；

substr()方法的第一個(gè)參數(shù)為負(fù)值加上字符串長(zhǎng)度得到的正值，第二個(gè)參數(shù)置為零。

call()和apply()方法

call()和apply()方法主要是用來(lái)擴(kuò)充函數(shù)的作用域。

call()和apply()方法接收兩個(gè)參數(shù)：

apply()：第一個(gè)參數(shù)是作用域，第二個(gè)是參數(shù)數(shù)組，其中第二個(gè)參數(shù)可以是數(shù)組實(shí)例，也可以是arguments對(duì)象。

call()方法也接收兩個(gè)參數(shù)，僅僅在于和apply()的傳參方式不同：傳遞函數(shù)的參數(shù)必須逐個(gè)寫(xiě)入。

鑒于這里不是重點(diǎn)，在這里就不再贅述。

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

在Array.prototype.slice.call(arguments,0)中，Array.prototype.slice調(diào)用的是Array的原型方法，對(duì)于正真的數(shù)組是有slice()方法，但是對(duì)于像arguments或者自己定義的一些類(lèi)數(shù)組對(duì)象雖然存在length等若干屬性，但是并沒(méi)有slice()方法，所以對(duì)于這種類(lèi)數(shù)組對(duì)象就得使用原型方法來(lái)使用slice()方法，即Array.prototype.slice（如果在自定義中的類(lèi)數(shù)組對(duì)象中自定義了slice()方法，那么自然可以直接調(diào)用）。

所以，Array.prototype.slice.call(arguments,0)的意思就可以這樣理解：對(duì)于arguments類(lèi)數(shù)組，我們調(diào)用Array.prototype.slice原型方法，并用call()方法，將作用域限定在arguments中，這里Array.prototype就可以理解為arguments，同參數(shù)0為slice()方法的第一個(gè)參數(shù)，即開(kāi)始位置索引。通過(guò)這種方法就將arguments類(lèi)數(shù)組轉(zhuǎn)換成了真數(shù)組。

當(dāng)然，把a(bǔ)rguments轉(zhuǎn)換為數(shù)組也可以用遍歷，那樣代碼自然就會(huì)多一些，而且不夠直接。

我們知道，Array.prototype.slice.call(arguments)能將具有l(wèi)ength屬性的對(duì)象轉(zhuǎn)成數(shù)組，除了IE下的節(jié)點(diǎn)集合（因?yàn)閕e下的dom對(duì)象是以com對(duì)象的形式實(shí)現(xiàn)的，js對(duì)象與com對(duì)象不能進(jìn)行轉(zhuǎn)換）
如：

 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]

可能剛開(kāi)始學(xué)習(xí)js的童鞋并不是很能理解這句為什么能實(shí)現(xiàn)這樣的功能。比如我就是一個(gè)，所以，來(lái)探究一下。

首先，slice有兩個(gè)用法，一個(gè)是String.slice,一個(gè)是Array.slice，第一個(gè)返回的是字符串，第二個(gè)返回的是數(shù)組，這里我們看第2個(gè)。

Array.prototype.slice.call(arguments)能夠?qū)rguments轉(zhuǎn)成數(shù)組，那么就是arguments.toArray().slice();到這里，是不是就可以說(shuō)Array.prototype.slice.call(arguments)的過(guò)程就是先將傳入進(jìn)來(lái)的第一個(gè)參數(shù)轉(zhuǎn)為數(shù)組，再調(diào)用slice？
 
再看call的用法，如下例子

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

可以看出，call了后，就把當(dāng)前函數(shù)推入所傳參數(shù)的作用域中去了，不知道這樣說(shuō)對(duì)不對(duì)，但反正this就指向了所傳進(jìn)去的對(duì)象就肯定的了。
到這里，基本就差不多了，我們可以大膽猜一下slice的內(nèi)部實(shí)現(xiàn)，如下

 Array.prototype.slice = function(start,end){
   var result = new Array();
   start = start || 0;
   end = end || this.length; //this指向調(diào)用的對(duì)象，當(dāng)用了call后，能夠改變this的指向，也就是指向傳進(jìn)來(lái)的對(duì)象，這是關(guān)鍵
   for(var i = start; i < end; i++){
      result.push(this[i]);
   }
   return result;
 }

大概就是這樣吧，理解就行，不深究。

最后，附個(gè)轉(zhuǎn)成數(shù)組的通用函數(shù)

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]; //據(jù)說(shuō)這樣比push快
      }
       return arr;
  }
}

最新評(píng)論