首頁 >web前端 >前端問答 >javascript中有沒有多型

javascript中有沒有多型

WBOY
WBOY原創
2022-07-01 16:06:271929瀏覽

JavaScript中有多態;多型表示的是同一操作作用於不同的物件上面可以產生不同的解釋和不同的執行結果,JavaScript中的多態體現在子類別中可直接實現同名函數即可覆蓋父類別函數,JavaScript中的父類別函數都可以直接覆蓋。

javascript中有沒有多型

本教學操作環境:windows10系統、javascript1.8.5版、Dell G3電腦。

javascript中有多態

含義

同一操作作用於不同的物件上面,可以產生不同的解釋和不同的執行結果

比方說,我養了一隻貓和一隻狗,我對它們發出同一個指令“叫一下”,貓會喵喵喵,而狗會汪汪汪,所以讓它們叫一下就是同一操作,而叫聲不同則是不同的執行結果。

用偽代碼來實現就是這樣的:

function getVoice(animals) {
    if(animals instanceof Cat){
        console.log('喵~');
        
    }
    if(animals instanceof Dog){
        console.log('汪~');
    }
}
class Cat {}
class Dog {}
getVoice(new Cat()); // '喵~'
getVoice(new Dog()); // '汪~'

那麼如果我們想增加一個動物呢?再多加一個判斷?那麼之後我每次都想要加一個動物的叫聲就都要修改一次 getVoice?是不是有點繁瑣呢?

所以我們要想想如何解決這個問題~

物件的多型性

#其實多態最根本的作用就是透過把過程化的條件語句轉換為物件的多態性,從而消除這些條件分支語句。

通俗一點來講,就是把 「做什麼」 和 「誰去做、怎麼做」 分離開,抽象概括就是把 「不變的事物」 和 「可能改變的事物」 分離開。

最開始我們舉的例子中就可以拆分理解成這樣:

不變的事物是:動物發出叫聲可能改變的事物是:什麼動物發出什麼樣的叫聲

那我們就可以把「動物發出叫聲」 這個動作分佈到各個類別上(封裝到各個類別上),然後在發出叫聲的getVoice 函數中呼叫"叫"這個動作就可以了。

上面這個例子就可以修改成這樣啦~

function getVoice (animals) {
    if (animals.sound instanceof Function) {
        // 判断是否有animal.sound且该属性为函数
        animals.sound();
    }
}
class Cat {
    sound () {
        console.log('喵~');
    }
}
class Dog {
    sound () {
        console.log('汪~');
    }
}
getVoice(new Cat()); // '喵~'
getVoice(new Dog()); // '汪~'

多型的實際應用

多型在設計模式上應用得比較廣泛,例如組合模式/ 策略模式等等。 ~~

雖然我們在平時的開發中不太用的到,但是一旦我們涉及到一些設計模式的話,多態還是很有用的

JS的封裝與多態

除了繼承,封裝與多型也是物件導向思想的組成部分。 JS的封裝、多態也是透過屬性的靈活應用「模擬」來實現的。

透過在類別中設定公共屬性,並在子類別中實現,就可以模擬封裝。

而多態的體現,則更為簡單,在子類別中直接實作同名函數即可覆寫(override)父類別函數。 JS中沒有類似C#中的virtualde 關鍵字,所有父類別函數都可以直接覆寫。

範例:

function calc(value1,value2){
this.data1=value1;
this.data2=value2; 
this.GetResult;
this.toString=function(){
if(this.GetResult)
return this.GetResult()+"";
return "0";
}
}
 
function sumCalc(value1,value2){
calc.call(this,value1,value2)
this.GetResult=function(){ 
return this.data1+this.data2;
}
}
function productCalc(value1,value2){
calc.call(this,value1,value2)
this.GetResult=function(){ 
return this.data1*this.data2;
}
}
var s=new sumCalc(2,3);
alert(s.toString());  //弹框5
var p=new productCalc(2,3);
alert(p.toString());  //弹框6

如上,sumCalc類別與productCalc類別都繼承並實作了calc類,並實作了「抽象函數」GetResult()。這就是JS封裝的實作方式。

另外,JS中的所有類別都繼承於Object,而Object有自己的toString()函數。所以,上面calc類別的toString()函數實際上覆蓋了原有的函數----多態的體現。

【相關推薦:javascript影片教學web前端

以上是javascript中有沒有多型的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn