javascript面向?qū)ο笾甁avascript 繼承
上幾節(jié)講了 JavaScript 面向?qū)ο笾臻g 、 javascript 面向?qū)ο蟮腏avaScript類 、 JavaScript 面向?qū)ο蟮闹接谐蓡T和公開(kāi)成員 與 Javascript 面向?qū)ο笾剌d,大家可以先看上面的再繼續(xù)往下看。
在JavaScript中實(shí)現(xiàn)繼承可以有多種方法,下面說(shuō)兩種常見(jiàn)的。
一,call 繼承,先看代碼:
先定義一個(gè)“人”類
//人類
Person=function(){
this.name="草/泥/馬";
this.eat=function(){
alert("我要吃飯");
}
this.sleep=function(){
alert("我要睡覺(jué)");
}
}
再定義一個(gè)學(xué)生類,讓它繼承于Person
//學(xué)生類
Student=function(){
Person.call(this);//繼承Person類
this.doHomework=function(){
alert("老師來(lái)了,作業(yè)借我抄下");
}
}
關(guān)鍵看 Person.call(this)這句,其中this代表當(dāng)前對(duì)象,即Student ,這很容易理解,而Person.call(this)的意思是:將Person類的所有的公開(kāi)成員“附加”給Student類,讓Student也具有了Person的所有功能。
和高級(jí)語(yǔ)言一樣,如果子類中出現(xiàn)了和父類中同名的成員,則會(huì)將其覆蓋,也就是所謂的“重寫”了。
同樣的,我們?cè)俣x一個(gè)女孩類 :
//女孩類
Girl=function(){
Person.call(this);//繼承Person類
this.sex="女";
}
JavaScript是可以實(shí)現(xiàn)多重繼承的,請(qǐng)看下面的Master(碩士)類,這個(gè)Master 自然是個(gè)學(xué)生,但同時(shí)又是個(gè)漂亮MM,于是有了下面的代碼:
//碩士類
Master=function(){
Student.call(this);//繼承Student類
Girl.call(this);//繼承Girl類
this.degree="碩士";//學(xué)歷
}
我們可以測(cè)試一下:
var master=new Master();
master.name="鳳姐";
master.eat();
master.doHomework();
alert("偶是名字叫:"+master.name);
alert("偶的性別是:"+master.sex);
多重繼承時(shí)要注意順序,如果兩個(gè)類中有相同名稱的成員,那么后一個(gè)將覆蓋前一個(gè),也就是說(shuō)當(dāng)前類只會(huì)繼承后一個(gè)類中的成員。
call 方法繼承就說(shuō)到這,如果大家對(duì)call方法不清楚,就請(qǐng)去問(wèn)問(wèn)谷歌兄,我就不贅述了,網(wǎng)上轉(zhuǎn)載得不要太多。下面說(shuō)下另外一種繼承方式。
二,prototype 原型繼承:
我們?cè)俣x一個(gè)班長(zhǎng)類:
//班長(zhǎng)類
SquadLeader=function (){
//打招呼
this.hi=function(){
alert("同學(xué)們好,我現(xiàn)在是班長(zhǎng)了");
}
}
上面定義了一個(gè)碩士類,現(xiàn)在這個(gè)碩士被提升為班長(zhǎng)了,所以這個(gè)Master要繼承SquadLeader了,這次我們用prototype 來(lái)實(shí)現(xiàn),請(qǐng)看下面代碼:
Master.prototype=new SquadLeader();//prototype 屬性指向一個(gè)對(duì)象
//或者
//Master.prototype=SquadLeader.prototype;
這樣Master就繼承了SquadLeader類,就這么一句話,這里有兩種形式,其實(shí)原理是一樣的。意思是:將SquadLeader的“靈魂”拷貝給了Master,于是從此SquadLeader能做的事,Master都可以做了。
測(cè)試一下:
var master=new Master();
master.hi()//輸出“同學(xué)們好,我現(xiàn)在是班長(zhǎng)了”
我個(gè)人比較喜歡用第一種方案(call 繼承)來(lái)實(shí)現(xiàn)繼承,所有代碼都包在一個(gè)“{}”內(nèi),一目了然,在書寫風(fēng)格上較之于第二種更接近于C#。prototype 屬性我一般用來(lái)對(duì)已有的類做擴(kuò)展。
JavaScript是門非常靈活的語(yǔ)言,實(shí)現(xiàn)繼承可能還有其他更好的方式,大家可以去研究挖掘,我在這就當(dāng)是拋了塊磚頭, 希望能引出華美的玉石!
- JavaScript面向?qū)ο笾甈rototypes和繼承
- javascript 面向?qū)ο?實(shí)現(xiàn)namespace,class,繼承,重載
- javascript 面向?qū)ο缶幊袒A(chǔ):繼承
- javascript 面向?qū)ο笕吕砭氈^承與多態(tài)
- javascript 面向?qū)ο蠓庋b與繼承
- JS 面向?qū)ο笾^承---多種組合繼承詳解
- JS面向?qū)ο螅?)之Object類,靜態(tài)屬性,閉包,私有屬性, call和apply的使用,繼承的三種實(shí)現(xiàn)方法
- javaScript面向?qū)ο罄^承方法經(jīng)典實(shí)現(xiàn)
- JS實(shí)現(xiàn)面向?qū)ο罄^承的5種方式分析
- JavaScript面向?qū)ο罄^承原理與實(shí)現(xiàn)方法分析
相關(guān)文章
Javascript 面向?qū)ο?對(duì)象(Object)
Javascript 面向?qū)ο?對(duì)象(Object)2010-05-05JavaScript 設(shè)計(jì)模式之組合模式解析
“組合模式”顧名思意就是將多種實(shí)現(xiàn)組合在一起而達(dá)到牽一處而動(dòng)全身的效果。2010-04-04手把手教你自己寫一個(gè)js表單驗(yàn)證框架的方法
其實(shí)我自己也就能簡(jiǎn)單用用js而已,但是呢,相對(duì)很多初學(xué)者來(lái)說(shuō)多懂了點(diǎn)Know How所以斗膽孟浪一下,將一些所得記錄下來(lái),以供更多的初學(xué)者能夠知道一個(gè)東西的實(shí)現(xiàn)過(guò)程,省去在源碼里摸索的過(guò)程。2010-09-09Riot.js 快速的JavaScript單元測(cè)試框架
Riot是一個(gè)快速,富有表現(xiàn)力,上下文驅(qū)動(dòng) 的單元測(cè)試框架。最初是用于Ruby的單元測(cè)試,最近作者Alex Young又實(shí)現(xiàn)了Riot的JavaScript版- Riot.js。2009-11-11javascript最常用與實(shí)用的創(chuàng)建類的代碼
組合構(gòu)造函數(shù)模式和原型模式2010-08-08實(shí)現(xiàn)JavaScript中繼承的三種方式
在JavaScript中,繼承可以通過(guò)三種手法實(shí)現(xiàn)原型鏈繼承 使用apply、call方法 對(duì)象實(shí)例間的繼承。2009-10-10javascript中類的定義及其方式(《javascript高級(jí)程序設(shè)計(jì)》學(xué)習(xí)筆記)
javascript也是一種面向?qū)ο蟮木幊陶Z(yǔ)言。但是javascript中的類相關(guān)的東西(類的定義,原型鏈,繼承等)卻不是很好理解,特別是繼承。2011-07-07JavaScript對(duì)象鏈?zhǔn)讲僮鞔a(jquery)
自從使用了jQuery以后,對(duì)它的鏈?zhǔn)讲僮骱苁且蕾嚕灾劣诔3SX(jué)得其他庫(kù)不好用。。2010-07-07js創(chuàng)建對(duì)象的幾種常用方式小結(jié)(推薦)
最近在看javascript高級(jí)程序設(shè)計(jì),其中對(duì)對(duì)象的創(chuàng)建做了具體的闡述,綜合起來(lái),總結(jié)了下(je知識(shí)庫(kù)javascript專欄由這方面的教程,有興趣的可以去知識(shí)庫(kù)看看)2010-10-10[推薦]javascript 面向?qū)ο蠹夹g(shù)基礎(chǔ)教程
看了很多介紹javascript面向?qū)ο蠹夹g(shù)的文章,很暈.為什么?不是因?yàn)閷懙貌缓?而是因?yàn)樘願(yuàn)W. javascript中的對(duì)象還沒(méi)解釋清楚怎么回事,一上來(lái)就直奔主題,類/繼承/原型/私有變量....2009-03-03