JavaScript 原型與繼承說(shuō)明
function A(x) { this.x = x; } alert(A.prototype); alert(A.prototype.constructor);
根據(jù)彈出的結(jié)果,我們可以得到:原型對(duì)象是由函數(shù)的構(gòu)造函數(shù)創(chuàng)建,它所擁有的屬性能被所有對(duì)象共享,初始時(shí)原型對(duì)象指向一個(gè)Object對(duì)象,并且定義了一個(gè)constructor屬性,該屬性指向定義該原型對(duì)象的構(gòu)造函數(shù)本身,再看如下代碼。
Code
function A(x) { A.prototype.x = x; } var obj = new A(10); alert(obj.x); alert(obj.constructor);
因?yàn)樵蛯?duì)象的所有屬性能被構(gòu)造函數(shù)創(chuàng)建對(duì)象共享,所以創(chuàng)建的對(duì)象可以訪問(wèn)這里的constructor屬性,同時(shí)obj對(duì)應(yīng)的就是原型對(duì)象(prototype)所創(chuàng)建出來(lái)的一個(gè)實(shí)例,那么重寫constructor屬性會(huì)出現(xiàn)什么樣的結(jié)果呢?
Code
function A(x) { A.prototype.x = x; } var objA = new A(10); objA.constructor = function(x){ alert("重寫obj的constructor屬性");this.x = 20 }; objA.constructor(); alert(objA.x); var objB = new A(10); alert(objB.x);
根據(jù)結(jié)果我們可以看到,首先彈出的是“重寫obj的constructor屬性”,然后彈出20,在彈出10,可見(jiàn),我們?cè)跁鴮懼貙憃bjA這個(gè)對(duì)象的constructor之后,objB并沒(méi)有被改變,因此無(wú)論在一個(gè)對(duì)象加入或修改多少屬性這都不影響其原型對(duì)象中屬性的本來(lái)面目,其實(shí)很容易理解js為什么這樣做,因?yàn)橐粋€(gè)對(duì)象的行為不能影響到其他對(duì)象,否則將會(huì)造成混亂。
在這里,我們可以總結(jié)一下,上面代碼的規(guī)則:
1.當(dāng)我們調(diào)用某個(gè)對(duì)象的時(shí)候,首先檢查該對(duì)象本身的自己定義的屬性,如果存在則調(diào)用。
2.當(dāng)自己本身的屬性不存在的時(shí)候,則調(diào)用其構(gòu)造函數(shù)所定義的原型對(duì)象的引用。
那么根據(jù)這個(gè)規(guī)則,就形成了JavaScript中的一個(gè)原型鏈,我們就可以根據(jù)這個(gè)規(guī)則來(lái)定義繼承關(guān)系。
function A(x) { A.prototype.x = x; } function B(x,y) { B.prototype.y = y; A.call(this,x); }
這段代碼顯示了兩個(gè)函數(shù),B函數(shù)繼承與A函數(shù),A.call(this.x)表示,將B的對(duì)象this傳遞到A函數(shù)中進(jìn)行執(zhí)行。然后,我們同樣需要由B函數(shù)構(gòu)造出來(lái)的對(duì)象需要包含A函數(shù)的所有特性,因此需要加上這么一句話。
B.prototype = new A();
alert(B.prototype.constructor);
先我們指定B的原型為A,因此,B函數(shù)繼承了A函數(shù)的特性,根據(jù)彈出的結(jié)果,我們可以看到,其constructor指向的是A函數(shù),那么我們的B函數(shù)的特性是不是丟失了呢?因此,我們需要在加上一句話,最后給出繼續(xù)的整合代碼。
function A(x) { A.prototype.x = x; A.prototype.ShowA = function(){ alert("A的Show方法!"); }; } function B(x,y) { B.prototype.y = y; A.call(this,x); B.prototype.ShowB = function(){ alert("B的Show方法!"); }; } B.prototype = new A(); B.prototype.constructor = B; var obj = new B(10,5); alert(obj.x); alert(obj.y); obj.ShowA(); obj.ShowB();
若有疑問(wèn)或不正之處,歡迎提出指正和討論。
相關(guān)文章
javascript 面向?qū)ο缶幊袒A(chǔ) 多態(tài)
javascript 面向?qū)ο缶幊袒A(chǔ) 多態(tài) 的實(shí)現(xiàn)方法說(shuō)明,大家可以看下下面的代碼。2009-08-08學(xué)習(xí)面向?qū)ο笾嫦驅(qū)ο蟮幕靖拍?對(duì)象和其他基本要素
學(xué)習(xí)面向?qū)ο笾嫦驅(qū)ο蟮幕靖拍?對(duì)象和其他基本要素2010-11-11javascript new一個(gè)對(duì)象的實(shí)質(zhì)
javascript 中,new一個(gè)對(duì)象的實(shí)質(zhì)是什么?即,當(dāng)我們構(gòu)建一個(gè)類的實(shí)例的時(shí)候,真正做了些什么?2010-01-01JavaScript 對(duì)象的屬性和方法4種不同的類型
JavaScript里,對(duì)象的屬性和方法支持4種不同的類型,需要的朋友可以參考下。2010-03-03[推薦]javascript 面向?qū)ο蠹夹g(shù)基礎(chǔ)教程
看了很多介紹javascript面向?qū)ο蠹夹g(shù)的文章,很暈.為什么?不是因?yàn)閷懙貌缓?而是因?yàn)樘願(yuàn)W. javascript中的對(duì)象還沒(méi)解釋清楚怎么回事,一上來(lái)就直奔主題,類/繼承/原型/私有變量....2009-03-03JavaScript 核心參考教程 內(nèi)置對(duì)象
JavaScript 是根據(jù) "ECMAScript"標(biāo)準(zhǔn)制定的網(wǎng)頁(yè)腳本語(yǔ)言。這個(gè)標(biāo)準(zhǔn)由 ECMA 組織發(fā)展和維護(hù)。ECMA-262 是正式的 JavaScript 標(biāo)準(zhǔn)。2009-10-10Javascript 面向?qū)ο螅ㄒ唬?共有方法,私有方法,特權(quán)方法)
最近在網(wǎng)上盾一些JS面向?qū)ο蟮臇|西。把其他高手們總結(jié)的東西,加上自己的理解,總結(jié)一下2012-05-05