快捷導(dǎo)航

javascript中的prototype屬性實例分析說明

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

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

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

復(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就是一個作用于類的屬性。默認情況下，所有Javascript類都會有一個prototype屬性，但是類實例沒有。 

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)∫粋€對象中并不存在的屬性或是方法時，它會試圖查看該對象所對應(yīng)的類中的prototype屬性中是否包含該屬性或是方法，而prototype也是一個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)前的實例進行賦值，沒有則創(chuàng)建。

內(nèi)置類的增強
在Javascript中并不能直接修改內(nèi)置類的prototype。但是可以通過修改prototype的屬性達到修改內(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一次可以插入多個元素的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語句輸出屬性時，也會被顯示：

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

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

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

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

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

一點點注意事項
前面說過，prototype是類的一個屬性。更改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)建一個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 被刪除了。 