JavaScript設計模式學習之路——繼承

早在學習java的時候，就已經接觸了繼承，在java中由於有extends關鍵字，所以繼承就比較簡單。可是在JavaScript中，只能經過靈活的辦法實現類的繼承。

下面是我昨天在學習過程當中，瞭解到的實現繼承的一些方法，包括有具體的代碼以及該方法的優缺點：

1.組合繼承方式

　　原理：在子類的構造函數中，調用父類的構造函數，在子類原型上實例化父類，因此稱爲組合模式。

　　優勢：融合了類式繼承和構造函數繼承的優勢

　　缺點：父類構造函數調用了兩次。第一次是使用構造函數時調用了父類的構造函數，第二次是實現子類原型的類式繼承時又調用了一次。

　　

    /*
    1.組合繼承方式
        缺點：在初始化時會調用兩次構造函數
    */
    var SuperClass = function(id,name){
        this.id = id;
        this.name = name;
        this.books = ['javascript','html','css'];

    }
    SuperClass.prototype.getName = function(){
        return this.name;

    }
    SuperClass.prototype.getId = function(){
        return this.id;

    }
    var SubClass = function(id,name,price){
        SuperClass.call(this,id,name);
        this.price = price;

    }
    SubClass.prototype = new SuperClass();
    SubClass.prototype.getPrice = function(){
        return this.price;

    }

    //測試用例
    var sub = new SubClass('001','css',25);
    sub.books.push('internet');
    console.log(sub.books);//["javascript", "html", "css", "internet"]
    var father = new SuperClass('002','html');
    console.log(father.books);// ["javascript", "html", "css"]

二、寄生式組合繼承

　　原理：原型繼承和構造函數繼承組合，此方法是Douglas Crockford對寄生式繼承的一個改造。

    /**
     *2.寄生式組合繼承法
    **/
    function inheritObject(o){
        function F(){};
        F.prototype = o;
        return new F();
    }
    /**
     *一、繼承設置
     *傳遞參數：subclass子類
     *傳遞參數：superclass父類
    **/
    function inheritPrototype(subClass,superClass){
        //先將父類原型副本保持一份在變量中
        var p = inheritObject(superClass.prototype);
        p.constructor = subClass;
        subClass.prototype = p;

    }

    var SuperClass = function(id,name){
        this.id = id;
        this.name = name;
        this.books = ['javascript','html','css'];

    }
    SuperClass.prototype.getName = function(){
        return this.name;

    }
    SuperClass.prototype.getId = function(){
        return this.id;

    }
    var SubClass = function(id,name,price){
        SuperClass.call(this,id,name);
        this.price = price;

    }
    inheritPrototype(SubClass,SuperClass);
    SubClass.prototype.getPrice = function(){
        return this.price;

    }


    //測試用例
    var sub = new SubClass('001','css',25);
    sub.books.push('internet');
    console.log(sub.books);//["javascript", "html", "css", "internet"]
    var father = new SuperClass('002','html');
    console.log(father.books);// ["javascript", "html", "css"]
    console.log(SubClass.prototype instanceof SuperClass);//SubClass的實例纔是SuperClass的一個實例，true

三、多重繼承

　　原理：將全部的目標屬性和方法複製，可帶多個參數。

    Object.prototype.mix = function(){
        //複製屬性和方法        
        var len = arguments.length;

        for(var i = 0; i < len; i++){
            var arg = arguments[i];
            for(var property in arg){
                this[property] = arg[property];
            }
        }

    }
    var Book = function(id,name){
        this.id = id;
        this.name = name;

    }
    var Image = function(url,size){
        this.url = url;
        this.size = size;
    }
    //測試用例
    var book = new Book('001','javascript');
    var image = new Image('http://baidu.com',52);
    var imageBook = new Object();
    var imageBook1 = new Object();
    imageBook.mix(book,image);
    imageBook1.mix(book,image);
    imageBook1.name = "真的很不錯";
    console.log(imageBook);// Object { id="001",  name="javascript",  url="http://baidu.com",  更多...}
    console.log(imageBook1);// Object { id="001",  name="真的很不錯",  url="http://baidu.com",  更多...}

四、多態

　　原理：很是相似於java中的函數的重載，只不過加上了一些封裝

　　例子：好比一個add()方法，無參數，返回0；一個參數，返回參數自己值+10；兩個參數，返回兩個參數值相加

　　

    //多態
    var add = function(){
        function zero(){
            return 0;
        }
        function one(num){
            return 10 + num;
        }
        function two(num1,num2){
            return num1 + num2;
        }
        var arg = arguments;
        var len = arg.length;
        switch(len){
            case 0 : return zero();
            case 1 : return one(arg[0]); 
            case 2 : return two(arg[0],arg[1]); 
        }
    }
    console.log(add());//0
    console.log(add(5));//15
    console.log(add(2,18));//20

到此，第二章的知識也就完畢了，迎來第三章。有錯誤的話，請你們留言指正哦~~