JavaScript設計模式（3）—— 多繼承與多態

原文出自於本人個人博客網站：https://www.dzyong.com（歡迎訪問）

轉載請註明來源: 鄧佔勇的個人博客 - 《JavaScript設計模式（2）—— 多種繼承方式的實現及原理》

本文鏈接地址: https://www.dzyong.com/#/ViewArticle/88

設計模式系列博客：JavaScript設計模式系列目錄（持續更新中）

 

         在JavaScript中繼承是依賴於原型prototype鏈實現的，只有一條原型鏈，理論上是不能繼承多個父類的。然而JavaScript是靈活的，可以通過一些特殊的技巧繼承多個對象的屬性來實現類似的多繼承。

        在講解多繼承之前，先說一下繼承單對象屬性的extend方法。

單繼承

//單繼承 屬性複製
let extend = function(target, source){
    //遍歷源對象中的屬性
    for (const property in source) {
        //將源對象中的屬性複製到目標對象中
        target[property] = source[property]
    }
    return target
}

extend方法是實現就是對對象中的屬性進行復制的過程。但是它是一個淺複製過程，它只能複製值類型的屬性，對於運用類型的屬性它無能爲力。

 

多繼承

let mix = function(){
    var i = 1,
        len = arguments.length,
        target = arguments[0]
        arg;
    for (; i < len; i++) {
        //緩存當前對象
        arg = arguments[i]
        for (const property in arg) {
            target[property] = arg[property]
        }
    }
    return target
}

mix 方法的作用就是將傳入的多個對象的屬性的值到源對象中，這樣就實現對多個對象屬性的繼承。但是必要要注意一點，第一個參數纔是需要繼承的對象。我們可以把這個方法綁定到原生object上，這樣所有的對象就是可以擁有這個方法了。

Object.prototype.mix = function(){
    let i = 0,
        len = arguments.length,
        arg;
    for (; i < len; i++) {
        arg = arguments[i]
        for (const property in arg) {
            this[property] = arg[property]
        }
    }
}

使用起來就更加的方便

book.mix(otherBook)

多態

多態，就是同一個方法多種調用方式。早JavaScript中，通過對傳入的參數做判斷來實現。

如我們定義個add方法，如果不傳參數則返回10，傳入一個參數返回該數平方，傳入兩個參數時返回兩個數之和。

let add = function(){
    var len = arguments.length
    switch(len){
        case 0: 
            return 10
        case 1:
            return Math.pow(arguments[0], 2)
        case 2:
            return arguments[0] + arguments[1]
    }
}