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