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

2019-11-21 00:17:35

字體：大中小

來源：轉載

供稿：網友

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

復制代碼代碼如下:

 
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就是一個作用于類的屬性。默認情況下，所有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中，當我們取一個對象中并不存在的屬性或是方法時，它會試圖查看該對象所對應的類中的prototype屬性中是否包含該屬性或是方法，而prototype也是一個Javascript對象，若是其中也沒有，該prototype又會訪問它對應的類的prototype，如此一級級地向上訪問，直到找到需要的屬性或方法，或是prototype屬性為null。

復制代碼代碼如下:

 
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中的屬性值，而直接對當前的實例進行賦值，沒有則創建。
內置類的增強
在Javascript中并不能直接修改內置類的prototype。但是可以通過修改prototype的屬性達到修改內置類行為的目的。

復制代碼代碼如下:

 
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函數：

復制代碼代碼如下:

 
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'); 

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

復制代碼代碼如下:

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

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

復制代碼代碼如下:

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

]
一點點注意事項
前面說過，prototype是類的一個屬性。更改prototype中的屬性值，有可能會帶來意想不到的災難！

復制代碼代碼如下:

 
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對象創建一個num屬性。 
Test.prototype.num = 6; // 所有指向Test.prototype.num的值。 
var p3 = inst1.num; // 5 這里返回的是剛創建的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 被刪除了。 