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

來源:互聯網
上載者:User

這是一個比較特殊的屬性,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 被刪除了。

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.