深入了解js的prototype以及prototype的一些應用

prototype是函數的一個屬性，并且是函數的原型對象。引用它的必然是函數，這個應該記住。

 但是，很奇怪，各位看官，你有沒有看過類似下面這樣引用prototype的js代碼：

function func(){
    var args = Array.prototype.slice.call(arguments, 1);
    return args;
 }      

 咦？？？看着上面這行代碼，你是不是對prototype隻是屬于函數産生深深的懷疑呢？

 你明白上面那個函數的意思嗎？我還是解釋一下吧。

 call是函數的一個方法，關于這個方法，它也是隻有····函數····才能夠調用的，它的作用是：調用引用它的函數。

 就拿這個Array.prototype.slice.call(arguments,1)來講，這裡面包含太多資訊了，我一個個分析一下。

 slice(start[,end])是js的一個原生數組函數，作用是擷取數組中從start下标開始到end下标結束的元素。舉個例子：

var arr1 = [2,3,'l',4,5,'j','i'];
    alert(arr1.slice(1));//結束下标省略表示從開始下标截取到末尾
   //這裡alert的是3,'l',4,5,'j','i'，你自己可以試一下
  arguments是js函數對象的一個屬性，作用是擷取函數的實參，傳回的是一個以函數實參為屬性元素的對象。舉個例子：



function args(){
    return this.arguments;//這裡的this可以省略，你自己可以試一下
    //我加上是為了說明，調用arguments的隻能是對象
}
alert(JSON.stringify(args(1,3,5,6,8)));
//傳回的是{"0":"1","1":"3","2":"5","3":"6","4":"8"}      

 關于函數的對象屬性arguments這裡就講這麼多了，要詳細了解，可以百度。

 而Array是js中生成數組的關鍵字。

 這裡為什麼要用Array.prototype來調用slice函數呢？而不用Array.slice，原因很簡單，因為數組的關鍵字Array不能這樣子Array.xx直接調用js的數組函數。但為什麼不能直接這樣調用呢？不急，下面我們來做實驗，你就會很清楚了。

alert(Array.slice());
//Uncaught TypeError: Array.slice is not a function      

 這裡直接給你報錯了，說明了什麼？呵呵，這說明Array關鍵字确實不能直接調用數組的函數。

alert(JSON.stringify(Array.prototype));
alert(JSON.stringify(Array.prototype.slice()));      

 這裡傳回都是空數組···[]···，說明了什麼？說明了Array關鍵字确實是可以調用prototype函數的屬性的，同時也說明js是可以這樣子Array.prototype調用js的數組函數的。

 說到這裡，問題就來了，我上面不是說，prototype是js函數的一個屬性，隻能被函數調用嗎？怎麼這裡Array關鍵字可以調用這個屬性prototype呢？那麼，我這不是坑自己對prototype的定義是錯誤的嗎？我這不是給自己打臉嗎？哎，看官，沒錯，你這裡看到的都是正确的。可是，至于Array關鍵字可以調用函數的prototype屬性，我有沒有給自己打臉，這裡，我們先别急得下結論。

 轉個彎說，看官是否還記得js生成數組的幾種方式？應該有多種，但，我這裡就不介紹了。

 不過，你是否看過這樣生成數組的方式？我們先來看下面的代碼：

var arr = new Array();      

 這個方式生成數組還記得吧？那麼，我們js的function是不是也可以像下面這樣子生成對象呢？

function func(){

}
var obj = new func();      

 上面生成數組的方式和下面構造函數生成對象的方式是不是很相似？沒錯，js中function和Array都是可以通過new來生成對象這樣的東西，這說明了什麼呢？你看Array()和func()是不是很像？是不是最後面都有一對圓括号？是就對了，呵呵，說了這麼多，我隻是想揭露一樣東西，這個東西就是，假如我猜的的沒有錯的話，Array()這個東西其實是js一個·····構造數組的内置函數····，不然，可以用new Array()的方式生存數組的方式就說不過去了是吧？

 講到這裡，我們再傳回來說js可以這樣子Array.prototype調用prototype就很明白不過了是吧？Array()是js的一個内置函數，既然Array是一個函數，那麼Array肯定擁有prototype這個屬性對吧？是以說，Array關鍵字調用prototype并沒有違反prototype是函數的一個屬性這個原則，prototype是函數的一個屬性依然是一個不變的結論。

 關于Array生成數組的方式，類似的我們是否可以這樣子new Object()生成對象，或者new String()這樣子生成字元串？既然可以這樣子構造對象和字元串，那麼我們下面的代碼也應該是可行的，對吧？

alert(JSON.stringify(String.prototype));
alert(JSON.stringify(Object.prototype));      

 根據上面的解釋，你應該知道這裡是可以執行的吧？你應該知道這裡的之是以能執行的原理吧？你自己試試。這裡就不再解釋了。

 講到這裡，哎，我既然把行文開始的那個函數給忘了？這裡講解一下本文開始那個func函數的作用：

 func函數的作用就是，從第二個實參數開始擷取func函數的實參。

 我來給你分析一下：

function func(){
var args = Array.prototype.slice.call(arguments, 1);
return args;
}
alert(func(0,1,2,3,4));//給func函數傳實參
  Array.prototype是一個空數組，

   Array.prototype.slice()的意思是一個空數組調用數組的函數slice()，

   Array.prototype.slice.call()的意思是call函數調用數組的函數slice()，      

  這裡call()怎麼調用slice()呢？

  是這樣子的，Arguments擷取func函數實參清單，生成一個對象傳遞給call()函數，call函數又把Arguments生成的對象傳遞給Array.prototype這個空數組，把第二個參數···1···傳遞給slice函數，然後，call就讓引用它的函數slice執行slice(1)，是以slice就從1下标開始擷取數組的元素了，而這個數組的元素其實就是Arguments的元素，是以，這個函數func的作用就是擷取下标為1開始的所有實參。不相信，你自己可以執行一下上面的函數。

 下面講講prototype的應用：

 應用1：

 給原型對象增加函數，就是讓對象擁有公用的函數。

 例子：我給數組原型對象增加一個打亂數組方法：

//給數組原型增加一個打亂數組的函數
Array.prototype.shuffle=function(){
var value = this.valueOf(),len = this.length,temp,key;
while(len--){
//随機生成數組的下标
key = Math.floor(Math.random()*len);
//temp為中間交換變量
temp = value[key];
value[key] = value[len];
value[len] = temp;
}
return value;
}
var arr1 = [0,1,2,3,4,5,6,7,8,9];
var arr2 = ['a','b','c','d','e','f'];    
alert(JSON.stringify(arr1.shuffle()));
alert(JSON.stringify(arr2.shuffle()));      

 你可以嘗試着再增加一個數組arr3看看它能不能調用shuffle函數，因為我這裡是給Array的原型對象增加的函數，是以在這個腳本内，所有數組都擁有shuffle這個函數。

 應用2：

 給原型對象增加屬性，也就是給對象增加公用的屬性

 例子：

function fun(){
        
}
fun.prototype.name = '小東';
fun.prototype.arr = [1,2,3,4];//這裡的屬性可以是數組，也可以是對象
var ob1 = new fun();
var ob2 = new fun();
alert(JSON.stringify(ob1.name));
alert(JSON.stringify(ob2.arr));      

 應用3：

 實作原型繼承；

function P1(){
    
    }
    function P2(){
        
    }
    //原型對象增加屬性和方法
    P2.prototype.name = 'P2"s name';
    P2.prototype.get=function(value){
            return value;
    }
    //執行個體化P2構造函數的一個對象
    var obp2 = new P2();//這個對象應該包含所有原型對象的屬性和方法
    //給P1的原型對象指派一個對象，相當于P1繼承了obp2的所有屬性和方法
    P1.prototype = obp2;//這個式子，簡單來講就類似于a = b, b指派給a這個總該明白吧？
    //調用P1從obp2繼承過來的get函數
    alert(P1.prototype.get('out"s name'));
    //展示P1從obp2繼承過來的name屬性
    alert(P1.prototype.name);
    //用構造函數P1執行個體化一個obp1對象
    var obp1 = new P1();
    //P1的原型對象prototype既然已經繼承了obp2的所有屬性和函數，那麼依據P1所執行個體化出來的對象也都有obp2的屬性和函數了
    alert(obp1.get('obp1"s name'));      

 關于prototype就講到這裡，假如本文有什麼錯誤，還望各位看官指出，我好糾正。

   特别指出：

 Array.prototype是一個數組

 String.prototype是一個字元串