快捷導(dǎo)航

javascript中的prototype屬性使用說明(函數(shù)功能擴(kuò)展)

更新時(shí)間：2010年08月16日 23:42:48 作者：

一說到prototype很多人可能第一個(gè)想到的是著名的prototype.js框架，當(dāng)然我們今天說的不是它，而是Javascript中的prototype屬性，一般都被翻譯為“原型”。

這是一個(gè)比較特殊的屬性，Javascript中的繼承一般都依賴這屬性實(shí)現(xiàn)。
在Javascript中，一切都是對象，字符串是對象，數(shù)組是對象，變量是對象，函數(shù)也是對象，所以才會允許['a','b','c'].push('d');這樣的操作存在。類本身也是一個(gè)對象，也可以定義屬性和方法：

復(fù)制代碼代碼如下:

 
function Test(){}; 
Test.str = 'str'; 
Test.fun = function(){return 'fun';}; 
var r1 = Test.str; // str 
var r2 = Test.fun(); // fun 
var inst = new Test(); 
var r3 = inst.str; // undefined 
var r4 = inst.fun(); // undefined 

prototype就是一個(gè)作用于類的屬性。默認(rèn)情況下，所有Javascript類都會有一個(gè)prototype屬性，但是類實(shí)例沒有。

復(fù)制代碼代碼如下:

 
function Test(){}; 
var p1 = typeof(String.prototype); // object 
var p2 = typeof(Test.prototype); // object 
var p3 = typeof(new Test().prototype); // undefined 
var p4 = typeof(Object.prototype); // object 
var p5 = typeof(new Object().prototype); // undefined 

取值與賦值
在Javascript中，當(dāng)我們?nèi)∫粋€(gè)對象中并不存在的屬性或是方法時(shí)，它會試圖查看該對象所對應(yīng)的類中的prototype屬性中是否包含該屬性或是方法，而prototype也是一個(gè)Javascript對象，若是其中也沒有，該prototype又會訪問它對應(yīng)的類的prototype，如此一級級地向上訪問，直到找到需要的屬性或方法，或是prototype屬性為null。

復(fù)制代碼代碼如下:

 
function Test(){}; 
Test.test = 'str'; 
function pt1() 
{ this.test1 = 'pt1'; }; 
function pt2() 
{ this.test2 = 'pt2'; }; 
pt2.prototype.test3 = 'test3'; 
pt2.prototype.test1 = 'test4'; 
pt1.prototype = new pt2(); 
Test.prototype = new pt1(); 
var inst = new Test(); 
var p1 = inst.test; // undefined 
var p2 = inst.test1; // pt1 而不是 test4 
var p3 = inst.test2; // pt2 
var p4 = inst.test3; // test3 

相對于取值，賦值就簡單得多了。它并不會一層層向上查找prototype中的屬性值，而直接對當(dāng)前的實(shí)例進(jìn)行賦值，沒有則創(chuàng)建。
內(nèi)置類的增強(qiáng)
在Javascript中并不能直接修改內(nèi)置類的prototype。但是可以通過修改prototype的屬性達(dá)到修改內(nèi)置類行為的目的。

復(fù)制代碼代碼如下:

 
Array.prototype = {push:function(){alert('test1');}}; // 不起作用 
Array.prototype.push = function(){alert('test2');}; // 可以 
var test = new Array('a','b','c'); 
test.push('d'); // test2 

一次可以插入多個(gè)元素的Array.push函數(shù)：

復(fù)制代碼代碼如下:

 
Array.prototype.pushs = function() 
{ 
var pos = this.length; 
for(var i=0; i<arguments.length; i++) 
{ 
this[++pos] = arguments[i]; 
} 
return this.length; 
} 
var test = new Array('a','b','c'); 
test.pushs('d','e'); 

值得注意的是，為內(nèi)置類的prototype添加的函數(shù)，在使用for語句輸出屬性時(shí)，也會被顯示：

復(fù)制代碼代碼如下:

 
var str; 
for(var i in test) 
{ 
str += (' ' + i); // '0 1 2 3 4 5 pushs' pushs自定義函數(shù)。 
} 

但是可以通過hasOwnProperty()進(jìn)行判斷：

復(fù)制代碼代碼如下:

 
var str; 
for(var i in test) 
{ 
if(test.hasOwnProperty(i)) // 過濾掉pushs函數(shù)。 
{ str += (' ' + i); } 
} 

]
一點(diǎn)點(diǎn)注意事項(xiàng)
前面說過，prototype是類的一個(gè)屬性。更改prototype中的屬性值，有可能會帶來意想不到的災(zāi)難！

復(fù)制代碼代碼如下:

 
function Test(){} 
Test.prototype.num = 3; 
var inst1 = new Test(); 
var inst2 = new Test(); 
Test.prototype.num = 4; // 所有指向Test.prototype.num的值。 
var p1 = inst1.num; // 4 
var p2 = inst2.num; // 4 
inst1.num = 5; // 賦值，會為inst對象創(chuàng)建一個(gè)num屬性。 
Test.prototype.num = 6; // 所有指向Test.prototype.num的值。 
var p3 = inst1.num; // 5 這里返回的是剛創(chuàng)建的inst1.num的值，而不是Test.prototype.num的值。 
var p4 = inst2.num; // 6 
delete Test.prototype.num; 
var p5 = inst1.num; // 5 inst1.num依然存在。 
var p6 = inst2.num; // undefined Test.prototype.num 被刪除了。 