快捷導(dǎo)航

javascript中的prototype屬性實(shí)例分析說明

更新時(shí)間：2010年08月09日 23:39:45 作者：

一說到prototype很多人可能第一個(gè)想到的是著名的prototype.js框架，當(dāng)然我們今天說的不是它，而是Javascript中的prototype屬性，一般都被翻譯為“原型”。這是一個(gè)比較特殊的屬性，Javascript中的繼承一般都依賴這屬性實(shí)現(xiàn)。

在Javascript中，一切都是對(duì)象，字符串是對(duì)象，數(shù)組是對(duì)象，變量是對(duì)象，函數(shù)也是對(duì)象，所以才會(huì)允許['a','b','c'].push('d');這樣的操作存在。類本身也是一個(gè)對(duì)象，也可以定義屬性和方法：

復(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(); // undefinedprototype就是一個(gè)作用于類的屬性。默認(rèn)情況下，所有Javascript類都會(huì)有一個(gè)prototype屬性，但是類實(shí)例沒有。 

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è)對(duì)象中并不存在的屬性或是方法時(shí)，它會(huì)試圖查看該對(duì)象所對(duì)應(yīng)的類中的prototype屬性中是否包含該屬性或是方法，而prototype也是一個(gè)Javascript對(duì)象，若是其中也沒有，該prototype又會(huì)訪問它對(duì)應(yīng)的類的prototype，如此一級(jí)級(jí)地向上訪問，直到找到需要的屬性或方法，或是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相對(duì)于取值，賦值就簡(jiǎn)單得多了。 

它并不會(huì)一層層向上查找prototype中的屬性值，而直接對(duì)當(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ù)： 

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語(yǔ)句輸出屬性時(shí)，也會(huì)被顯示：

復(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中的屬性值，有可能會(huì)帶來意想不到的災(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; // 賦值，會(huì)為inst對(duì)象創(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 被刪除了。 