javascript每日必學(xué)之多態(tài)
朋友們大家好,今天我們就接著前面的內(nèi)容講,前面我們已經(jīng)講到了繼承,今天我們就來(lái)講OOP目前最后一個(gè)體現(xiàn),那就是多態(tài),因?yàn)閖avascript語(yǔ)言的靈活性,所以我們是沒(méi)有辦法使用接口的,所以這也給js程序帶來(lái)了一定的困惑,大家也不用太著急關(guān)心這個(gè)問(wèn)題,因?yàn)檫@些到后面ECMAScript后面的版本會(huì)給我們解決這些問(wèn)題的,又扯遠(yuǎn)了,還是回到正題,OOP的多態(tài),前面我們已經(jīng)可以很明白的理解繼承是什么樣子的了,就是先聲明一個(gè)父類,然后,我們可以寫(xiě)很多的子類來(lái)繼承父類的屬性和方法,這些我們就可以用最少的代碼量,實(shí)現(xiàn)了與父類一樣的功能,這就是繼承。馬上就有同學(xué)提出疑問(wèn):前面的繼承我看了很久,也能有理解,但主是不知道有什么用,為什么我們要去寫(xiě)那么多的繼承類?這個(gè)問(wèn)題,立馬切中要害,問(wèn)得相當(dāng)?shù)年P(guān)鍵,如果沒(méi)有多態(tài)的存在,我們先前所說(shuō)的繼承還真沒(méi)什么用,因?yàn)槲覀兯械睦^承類都是一模一樣的復(fù)制,沒(méi)有什么特點(diǎn)。舉個(gè)例子:
我們可以很明顯地就看出問(wèn)題來(lái)了,熊貓A,熊貓B與父類的熊貓完全一樣,雖然,我們可以很輕松寫(xiě)很多個(gè)子類來(lái),但是,這并沒(méi)有什么用,我們就直接使用父類的屬性和方法,就能達(dá)到我們的目的,對(duì),這樣說(shuō),感覺(jué)OOP的繼承沒(méi)有什么用了,前面我們才學(xué)到的知識(shí),不會(huì)就這樣浪費(fèi)了吧,哈哈,不要怕,前面只要只是你所學(xué)到的東西,完全沒(méi)有白學(xué),下面我們就來(lái)講繼承的補(bǔ)充,多態(tài),看示例圖:
不管是人類,還是其他動(dòng)物,不斷的繁衍,不斷的進(jìn)化,每一個(gè)后代看似一樣,其實(shí)又不一樣,或多或少都有自己的獨(dú)特的屬性或者行為,現(xiàn)在熊貓A在某種特別的情況下學(xué)會(huì)了洗澡,它有自己的衛(wèi)生屬性,而熊貓B是個(gè)高手,學(xué)會(huì)了泡妞(大爺?shù)?,老子都沒(méi)學(xué)會(huì),它學(xué)會(huì)了),它有了自己的魅力屬性,這樣我們就可以很清晰看出來(lái),當(dāng)我們需要寫(xiě)一個(gè)子類來(lái)繼承父類的時(shí)候,它一定是具有和父類相同行為或者屬性而且還一定具有自己獨(dú)特的行為或者屬性,這樣我們就省去了相同行為或者屬性的代碼編寫(xiě)(OOP思想帶來(lái)的好處再一次被體現(xiàn)),下面我們來(lái)看實(shí)例代碼:
//遺傳繼承函數(shù) function Extend(Children,Parent){ for(var p in Parent){ if(typeof Children[p] == "undefined"){ Children[p] = Parent[p]; } } } //熊貓父類 function Panda(){ //顏色 this.color = "黑色交錯(cuò)"; //健康值 this.health = 100; //可愛(ài)值 this.lovely = 80; //年齡 this.age = "3歲"; } //吃 Panda.prototype.Eat = function(){ console.log("吃竹子"); } //拉 Panda.prototype.Shit = function(){ console.log("拉了一坨翔"); } //睡 Panda.prototype.Sleep = function(){ console.log("美美地睡了一整天"); } //交配 Panda.prototype.Mating = function(){ console.log("熊貓的愛(ài)愛(ài)也是為了下一代嘛"); } //熊貓A function Panda_A(){ //講衛(wèi)生度 this.lovehealth = 60; Extend(this,new Panda()); } //洗澡 Panda_A.prototype.Bath = function(){ console.log("為了不生病,就得講衛(wèi)生,我去洗澡了"); //洗一次澡,講衛(wèi)生程度 + 1 this.lovehealth += 1; } //熊貓B function Panda_B(){ //魅力值 this.charm = 90; Extend(this,new Panda()); } //泡妞 Panda_B.prototype.GetGirls = function(){ console.log("為了族群的繁榮,我就先去泡妞去了,誰(shuí)叫我的魅力這么高呢?"); //泡一次妞,魅力值 - 1 this.charm -= 1; }
下面我們看一看示例,是不是跟前面描述的一樣?
不管是父類的實(shí)例,還是子類的實(shí)例,都能正常的使用父類(共有)的屬性及行為函數(shù),下面再來(lái)看看特有的呢?
再來(lái)大家最關(guān)心的那個(gè)行為還沒(méi)測(cè)試,就是熊貓B可以泡妞,不再調(diào)大家的口味了,立馬測(cè)試
能過(guò)上面的示例,我們已經(jīng)知道多態(tài)是怎么一回事了,現(xiàn)在又有同學(xué)發(fā)問(wèn)了:前面我們已經(jīng)可以實(shí)現(xiàn)多態(tài)了,只是看到多了一些特有的屬性和行為,那么可不可以改變一些原有屬性及行為呢?因?yàn)橐M對(duì)象,我們就要做到盡量相同的模擬,就像,如果還有一個(gè)熊貓C類,他們進(jìn)化得更高級(jí)了,已經(jīng)不用吃竹子了,居然學(xué)人開(kāi)始吃飯了:
//熊貓C function Panda_C(){ Extend(this,new Panda()); } //吃 Panda_C.prototype.Eat = function(){ //吃飯 console.log("我們要進(jìn)化得比人類更高級(jí),所以我們就開(kāi)始吃飯了,不再吃竹子?。?); }
看到了吧,只要是與父類已經(jīng)不相同的屬性或者行為,我們都可以通過(guò)重寫(xiě)的方式來(lái)進(jìn)行覆蓋,從而實(shí)現(xiàn)子類變態(tài)的特殊要求。
總結(jié)一下,今天我們就補(bǔ)充前面繼承的思想,從而實(shí)現(xiàn)了多態(tài)的模擬,OOP思想,我們也先就告一段落,相信大家已經(jīng)對(duì)OOP有了自己的認(rèn)識(shí),就是把代碼模擬成對(duì)象來(lái)進(jìn)行編寫(xiě),這樣有兩個(gè)好處:
1、把代碼的重用率提高了,提高了工作效率。
2、代碼已經(jīng)被模擬在對(duì)象,這樣有條理代碼方便了我們管理,和后期維護(hù)及擴(kuò)展。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助。
- javascript 面向?qū)ο缶幊袒A(chǔ) 多態(tài)
- javascript 面向?qū)ο笕吕砭氈^承與多態(tài)
- Javascript基于對(duì)象三大特性(封裝性、繼承性、多態(tài)性)
- js中實(shí)現(xiàn)多態(tài)采用和繼承類似的方法
- JS中的多態(tài)實(shí)例詳解
- 學(xué)習(xí)JavaScript設(shè)計(jì)模式(多態(tài))
- JavaScript實(shí)現(xiàn)多態(tài)和繼承的封裝操作示例
- JavaScript使用prototype原型實(shí)現(xiàn)的封裝繼承多態(tài)示例
- JavaScript多態(tài)與封裝實(shí)例分析
- javascript面向?qū)ο笕筇卣髦^承實(shí)例詳解
- javascript面向?qū)ο笕筇卣髦庋b實(shí)例詳解
- javascript面向?qū)ο笕筇卣髦鄳B(tài)實(shí)例詳解
相關(guān)文章
Bootstrap 模態(tài)框(Modal)插件代碼解析
Bootstrap 模態(tài)框(Modal)插件 模態(tài)框(Modal)是覆蓋在父窗體上的子窗體。這篇文章主要介紹了Bootstrap 模態(tài)框(Modal)插件代碼解析的相關(guān)資料,需要的朋友可以參考下2016-12-12js遍歷獲取表格內(nèi)數(shù)據(jù)的方法(必看)
下面小編就為大家?guī)?lái)一篇js遍歷獲取表格內(nèi)數(shù)據(jù)的方法(必看)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-04-04JavaScript實(shí)現(xiàn)動(dòng)畫(huà)打開(kāi)半透明提示層的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)動(dòng)畫(huà)打開(kāi)半透明提示層的方法,涉及javascript操作DOM的相關(guān)技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-04-04動(dòng)態(tài)創(chuàng)建樣式表在各瀏覽器中的差異測(cè)試代碼
對(duì)于標(biāo)準(zhǔn)瀏覽器,直接使用css.innerHTML也可以修改HTMLStyleElement的css規(guī)則2011-09-09判斷滾動(dòng)條滑到底部觸發(fā)事件(實(shí)例講解)
下面小編就為大家?guī)?lái)一篇判斷滾動(dòng)條滑到底部觸發(fā)事件的實(shí)例講解。具有很好的參考價(jià)值。一起跟隨小編過(guò)來(lái)看看吧,希望對(duì)大家有所幫助2017-11-11JavaScript 中如何實(shí)現(xiàn)并發(fā)控制
在日常開(kāi)發(fā)過(guò)程中,你可能會(huì)遇到并發(fā)控制的場(chǎng)景,比如控制請(qǐng)求并發(fā)數(shù)。那么在 JavaScript 中如何實(shí)現(xiàn)并發(fā)控制呢?在回答這個(gè)問(wèn)題之前,我們來(lái)簡(jiǎn)單介紹一下并發(fā)控制。2021-05-05layui樹(shù)形菜單動(dòng)態(tài)遍歷的例子
今天小編就為大家分享一篇layui樹(shù)形菜單動(dòng)態(tài)遍歷的例子,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09javascript 中null和undefined區(qū)分和比較
這篇文章主要介紹了javascript 中null和undefined區(qū)分和比較的相關(guān)資料,需要的朋友可以參考下2017-04-04