js prototype深入理解及應(yīng)用實(shí)例分析

本文實(shí)例講述了js prototype深入理解及應(yīng)用。分享給大家供大家參考，具體如下：

上一篇講了js的prototype概念，在這里回顧一下prototype的定義：

prototype是函數(shù)的一個(gè)屬性，并且是函數(shù)的原型對(duì)象。引用它的必然是函數(shù)，這個(gè)應(yīng)該記住。

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

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

咦？？？看著上面這行代碼，你是不是對(duì)prototype只是屬于函數(shù)產(chǎn)生深深的懷疑呢？

你明白上面那個(gè)函數(shù)的意思嗎？我還是解釋一下吧。

call是函數(shù)的一個(gè)方法，關(guān)于這個(gè)方法，它也是只有····函數(shù)····才能夠調(diào)用的，它的作用是：調(diào)用引用它的函數(shù)。

就拿這個(gè)Array.prototype.slice.call(arguments,1)來(lái)講，這里面包含太多信息了，我一個(gè)個(gè)分析一下。

slice(start[,end])是js的一個(gè)原生數(shù)組函數(shù)，作用是獲取數(shù)組中從start下標(biāo)開始到end下標(biāo)結(jié)束的元素。舉個(gè)例子：

var arr1 = [2,3,'l',4,5,'j','i'];
alert(arr1.slice(1));//結(jié)束下標(biāo)省略表示從開始下標(biāo)截取到末尾
//這里alert的是3,'l',4,5,'j','i'，你自己可以試一下

arguments是js函數(shù)對(duì)象的一個(gè)屬性，作用是獲取函數(shù)的實(shí)參，返回的是一個(gè)以函數(shù)實(shí)參為屬性元素的對(duì)象。舉個(gè)例子：

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

關(guān)于函數(shù)的對(duì)象屬性arguments這里就講這么多了，要詳細(xì)理解，可以百度。

而Array是js中生成數(shù)組的關(guān)鍵字。

這里為什么要用Array.prototype來(lái)調(diào)用slice函數(shù)呢？而不用Array.slice，原因很簡(jiǎn)單，因?yàn)閿?shù)組的關(guān)鍵字Array不能這樣子Array.xx直接調(diào)用js的數(shù)組函數(shù)。但為什么不能直接這樣調(diào)用呢？不急，下面我們來(lái)做實(shí)驗(yàn)，你就會(huì)很清楚了。

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

這里直接給你報(bào)錯(cuò)了，說明了什么？呵呵，這說明Array關(guān)鍵字確實(shí)不能直接調(diào)用數(shù)組的函數(shù)。

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

這里返回都是空數(shù)組···[]···，說明了什么？說明了Array關(guān)鍵字確實(shí)是可以調(diào)用prototype函數(shù)的屬性的，同時(shí)也說明js是可以這樣子Array.prototype調(diào)用js的數(shù)組函數(shù)的。

說到這里，問題就來(lái)了，我上面不是說，prototype是js函數(shù)的一個(gè)屬性，只能被函數(shù)調(diào)用嗎？怎么這里Array關(guān)鍵字可以調(diào)用這個(gè)屬性prototype呢？那么，我這不是坑自己對(duì)prototype的定義是錯(cuò)誤的嗎？我這不是給自己打臉嗎？哎，看官，沒錯(cuò)，你這里看到的都是正確的?？墒?，至于Array關(guān)鍵字可以調(diào)用函數(shù)的prototype屬性，我有沒有給自己打臉，這里，我們先別急得下結(jié)論。

轉(zhuǎn)個(gè)彎說，看官是否還記得js生成數(shù)組的幾種方式？應(yīng)該有多種，但，我這里就不介紹了。

不過，你是否看過這樣生成數(shù)組的方式？我們先來(lái)看下面的代碼：

var arr = new Array();

這個(gè)方式生成數(shù)組還記得吧？那么，我們js的function是不是也可以像下面這樣子生成對(duì)象呢？

function func(){
}
var obj = new func();

上面生成數(shù)組的方式和下面構(gòu)造函數(shù)生成對(duì)象的方式是不是很相似？沒錯(cuò)，js中function和Array都是可以通過new來(lái)生成對(duì)象這樣的東西，這說明了什么呢？你看Array()和func()是不是很像？是不是最后面都有一對(duì)圓括號(hào)？是就對(duì)了，呵呵，說了這么多，我只是想揭露一樣?xùn)|西，這個(gè)東西就是，假如我猜的的沒有錯(cuò)的話，Array()這個(gè)東西其實(shí)是js一個(gè)·····構(gòu)造數(shù)組的內(nèi)置函數(shù)····，不然，可以用new Array()的方式生存數(shù)組的方式就說不過去了是吧？

講到這里，我們?cè)俜祷貋?lái)說js可以這樣子Array.prototype調(diào)用prototype就很明白不過了是吧？Array()是js的一個(gè)內(nèi)置函數(shù)，既然Array是一個(gè)函數(shù)，那么Array肯定擁有prototype這個(gè)屬性對(duì)吧？所以說，Array關(guān)鍵字調(diào)用prototype并沒有違反prototype是函數(shù)的一個(gè)屬性這個(gè)原則，prototype是函數(shù)的一個(gè)屬性依然是一個(gè)不變的結(jié)論。

關(guān)于Array生成數(shù)組的方式，類似的我們是否可以這樣子new Object()生成對(duì)象，或者new String()這樣子生成字符串？既然可以這樣子構(gòu)造對(duì)象和字符串，那么我們下面的代碼也應(yīng)該是可行的，對(duì)吧？

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

根據(jù)上面的解釋，你應(yīng)該知道這里是可以執(zhí)行的吧？你應(yīng)該知道這里的之所以能執(zhí)行的原理吧？你自己試試。這里就不再解釋了。

講到這里，哎，我既然把行文開始的那個(gè)函數(shù)給忘了？這里講解一下本文開始那個(gè)func函數(shù)的作用：

func函數(shù)的作用就是，從第二個(gè)實(shí)參數(shù)開始獲取func函數(shù)的實(shí)參。

我來(lái)給你分析一下：

function func(){
var args = Array.prototype.slice.call(arguments, 1);
return args;
}
alert(func(0,1,2,3,4));//給func函數(shù)傳實(shí)參

Array.prototype是一個(gè)空數(shù)組，

Array.prototype.slice()的意思是一個(gè)空數(shù)組調(diào)用數(shù)組的函數(shù)slice()，

Array.prototype.slice.call()的意思是call函數(shù)調(diào)用數(shù)組的函數(shù)slice()，

這里call()怎么調(diào)用slice()呢？

是這樣子的，Arguments獲取func函數(shù)實(shí)參列表，生成一個(gè)對(duì)象傳遞給call()函數(shù)，call函數(shù)又把Arguments生成的對(duì)象傳遞給Array.prototype這個(gè)空數(shù)組，把第二個(gè)參數(shù)···1···傳遞給slice函數(shù)，然后，call就讓引用它的函數(shù)slice執(zhí)行slice(1)，所以slice就從1下標(biāo)開始獲取數(shù)組的元素了，而這個(gè)數(shù)組的元素其實(shí)就是Arguments的元素，因此，這個(gè)函數(shù)func的作用就是獲取下標(biāo)為1開始的所有實(shí)參。不相信，你自己可以執(zhí)行一下上面的函數(shù)。

下面講講prototype的應(yīng)用：

應(yīng)用1：

給原型對(duì)象增加函數(shù)，就是讓對(duì)象擁有公用的函數(shù)。

例子：我給數(shù)組原型對(duì)象增加一個(gè)打亂數(shù)組方法：

//給數(shù)組原型增加一個(gè)打亂數(shù)組的函數(shù)
Array.prototype.shuffle=function(){
var value = this.valueOf(),len = this.length,temp,key;
while(len--){
//隨機(jī)生成數(shù)組的下標(biāo)
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()));

你可以嘗試著再增加一個(gè)數(shù)組arr3看看它能不能調(diào)用shuffle函數(shù)，因?yàn)槲疫@里是給Array的原型對(duì)象增加的函數(shù)，所以在這個(gè)腳本內(nèi)，所有數(shù)組都擁有shuffle這個(gè)函數(shù)。

應(yīng)用2：

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

例子：

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

應(yīng)用3：

實(shí)現(xiàn)原型繼承；

function P1(){
}
function P2(){
}
//原型對(duì)象增加屬性和方法
P2.prototype.name = 'P2"s name';
P2.prototype.get=function(value){
  return value;
}
//實(shí)例化P2構(gòu)造函數(shù)的一個(gè)對(duì)象
var obp2 = new P2();//這個(gè)對(duì)象應(yīng)該包含所有原型對(duì)象的屬性和方法
//給P1的原型對(duì)象賦值一個(gè)對(duì)象，相當(dāng)于P1繼承了obp2的所有屬性和方法
P1.prototype = obp2;//這個(gè)式子，簡(jiǎn)單來(lái)講就類似于a = b, b賦值給a這個(gè)總該明白吧？
//調(diào)用P1從obp2繼承過來(lái)的get函數(shù)
alert(P1.prototype.get('out"s name'));
//展示P1從obp2繼承過來(lái)的name屬性
alert(P1.prototype.name);
//用構(gòu)造函數(shù)P1實(shí)例化一個(gè)obp1對(duì)象
var obp1 = new P1();
//P1的原型對(duì)象prototype既然已經(jīng)繼承了obp2的所有屬性和函數(shù)，那么依據(jù)P1所實(shí)例化出來(lái)的對(duì)象也都有obp2的屬性和函數(shù)了
alert(obp1.get('obp1"s name'));

關(guān)于prototype就講到這里，假如本文有什么錯(cuò)誤，還望各位看官指出，我好糾正。

特別指出：

• Array.prototype是一個(gè)數(shù)組
• String.prototype是一個(gè)字符串
• Object.prototype是一個(gè)對(duì)象

感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測(cè)試上述代碼運(yùn)行效果。

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《javascript面向?qū)ο笕腴T教程》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。