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"]

2、寄生式组合继承

　　原理：原型继承和构造函数继承组合，此方法是Douglas Crockford对寄生式继承的一个改造。

    /**
     *2.寄生式组合继承法
    **/
    function inheritObject(o){
        function F(){};
        F.prototype = o;
        return new F();
    }
    /**
     *1、继承设置
     *传递参数：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

3、多重继承

　　原理：将所有的目标属性和方法复制，可带多个参数。

    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",  更多...}

4、多态

　　原理：非常类似于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

到此，第二章的知识也就完毕了，迎来第三章。有错误的话，请大家留言指正哦~~