JavaScript中的代码复用

曾经终败给现在 2022-11-21 06:56 157阅读 0赞

### 目录 ###

*   *   *   模式1：原型继承
         *   模式2：复制所有属性进行继承
         *   模式3：混合（mix-in）
         *   模式4：借用方法
         *   模式5：默认模式
         *   模式6：借用构造函数
         *   模式7：借用构造函数并设置原型
         *   模式8：共享原型
         *   模式9：临时构造函数
         *   模式10：klass
         *   总结

###  模式1：原型继承 ###

原型继承是让父对象作为子对象的原型，从而达到继承的目的：

同时，ECMAScript5也提供了类似的一个方法叫做Object.create用于继承对象，用法如下：

/* 使用新版的ECMAScript 5提供的功能 */
    var child = Object.create(parent);
    
    var child = Object.create(parent, { 
        age: {  value: 2} // ECMA5 descriptor});
    console.log(child.hasOwnProperty("age")); // true

而且，也可以更细粒度地在第二个参数上定义属性：

// 首先，定义一个新对象manvar man = Object.create(null);
    
    // 接着，创建包含属性的配置设置
    // 属性设置为可写，可枚举，可配置var config = { 
        writable: true,
        enumerable: true,
        configurable: true
    };
    
    // 通常使用Object.defineProperty()来添加新属性(ECMAScript5支持）
    // 现在，为了方便，我们自定义一个封装函数
    var defineProp = function (obj, key, value) { 
        config.value = value;
        Object.defineProperty(obj, key, config);
    }
    
    defineProp(man, 'car', 'Delorean');
    defineProp(man, 'dob', '1981');
    defineProp(man, 'beard', false);

所以，继承就这么可以做了：

var driver = Object.create( man );
    defineProp (driver, 'topSpeed', '100mph');
    driver.topSpeed // 100mph

但是有个地方需要注意，就是Object.create(null)创建的对象的原型为undefined，也就是没有toString和valueOf方法，所以alert(man);的时候会出错，但alert(man.car);是没问题的。

--------------------

###  模式2：复制所有属性进行继承 ###

这种方式的继承就是将父对象里所有的属性都复制到子对象上，一般子对象可以使用父对象的数据。

先来看一个浅拷贝的例子：

/* 浅拷贝 */
    function extend(parent, child) { 
        var i;
        child = child || { };
        for (i in parent) { 
            if (parent.hasOwnProperty(i)) { 
                child[i] = parent[i];
            }
        }
        return child;
    }
    
    var dad = {  name: "Adam" };
    var kid = extend(dad);
    console.log(kid.name); // "Adam"
    
    var dad = { 
        counts: [1, 2, 3],
        reads: {  paper: true }
    };
    var kid = extend(dad);
    kid.counts.push(4);
    console.log(dad.counts.toString()); // "1,2,3,4"
    console.log(dad.reads === kid.reads); // true

代码的最后一行，你可以发现dad和kid的reads是一样的，也就是他们使用的是同一个引用，这也就是浅拷贝带来的问题。

我们再来看一下深拷贝：

/* 深拷贝 */
    function extendDeep(parent, child) { 
        var i,
            toStr = Object.prototype.toString,
            astr = "[object Array]";
    
        child = child || { };
    
        for (i in parent) { 
            if (parent.hasOwnProperty(i)) { 
                if (typeof parent[i] === 'object') { 
                    child[i] = (toStr.call(parent[i]) === astr) ? [] : { };
                    extendDeep(parent[i], child[i]);
                } else { 
                    child[i] = parent[i];
                }
            }
        }
        return child;
    }
    
    var dad = { 
        counts: [1, 2, 3],
        reads: {  paper: true }
    };
    var kid = extendDeep(dad);
    
    kid.counts.push(4);
    console.log(kid.counts.toString()); // "1,2,3,4"
    console.log(dad.counts.toString()); // "1,2,3"
    
    console.log(dad.reads === kid.reads); // false
    kid.reads.paper = false;

深拷贝以后，两个值就不相等了，bingo！

--------------------

###  模式3：混合（mix-in） ###

混入就是将一个对象的一个或多个（或全部）属性（或方法）复制到另外一个对象，我们举一个例子：

mix函数将所传入的所有参数的子属性都复制到child对象里，以便产生一个新对象。

那如何我们只想混入部分属性呢？该个如何做？其实我们可以使用多余的参数来定义需要混入的属性，例如mix（child,parent,method1,method2)这样就可以只将parent里的method1和method2混入到child里。上代码：

// Car 
    var Car = function (settings) { 
        this.model = settings.model || 'no model provided';
        this.colour = settings.colour || 'no colour provided';
    };
    
    // Mixin
    var Mixin = function () {  };
    Mixin.prototype = { 
        driveForward: function () { 
            console.log('drive forward');
        },
        driveBackward: function () { 
            console.log('drive backward');
        }
    };
    
    
    // 定义的2个参数分别是被混入的对象（reciving）和从哪里混入的对象（giving)
    function augment(receivingObj, givingObj) { 
        // 如果提供了指定的方法名称的话，也就是参数多余3个
        if (arguments[2]) { 
            for (var i = 2, len = arguments.length; i < len; i++) { 
                receivingObj.prototype[arguments[i]] = givingObj.prototype[arguments[i]];
            }
        }
        // 如果不指定第3个参数，或者更多参数，就混入所有的方法
        else { 
            for (var methodName in givingObj.prototype) { 
                // 检查receiving对象内部不包含要混入的名字，如何包含就不混入了
                if (!receivingObj.prototype[methodName]) { 
                    receivingObj.prototype[methodName] = givingObj.prototype[methodName];
                }
            }
        }
    }
    
    // 给Car混入属性，但是值混入'driveForward' 和 'driveBackward'*/
    augment(Car, Mixin, 'driveForward', 'driveBackward');
    
    // 创建新对象Car
    var vehicle = new Car({  model: 'Ford Escort', colour: 'blue' });
    
    // 测试是否成功得到混入的方法
    vehicle.driveForward();
    vehicle.driveBackward();

该方法使用起来就比较灵活了。

--------------------

###  模式4：借用方法 ###

一个对象借用另外一个对象的一个或两个方法，而这两个对象之间不会有什么直接联系。不用多解释，直接用代码解释吧：

--------------------

###  模式5：默认模式 ###

代码复用大家常用的默认模式，往往是有问题的，该模式使用Parent()的构造函数创建一个对象，并且将该对象赋值给Child()的原型。我们看一下代码：

这种模式的缺点是Child不能传进参数，基本上也就废了。

--------------------

###  模式6：借用构造函数 ###

该模式是Child借用Parent的构造函数进行apply，然后将child的this和参数传递给apply方法：

// 父构造函数
    function Parent(name) { 
        this.name = name || 'Adam';
    }
    
    // 给原型添加say功能
    Parent.prototype.say = function () { 
        return this.name;
    };
    
    // Child构造函数
    function Child(name) { 
        Parent.apply(this, arguments);
    }
    
    var kid = new Child("Patrick");
    console.log(kid.name); // "Patrick"
    
    // 缺点：没有从构造函数上继承say方法
    console.log(typeof kid.say); // "undefined"

缺点也很明显，say方法不可用，因为没有继承过来。

--------------------

###  模式7：借用构造函数并设置原型 ###

上述两个模式都有自己的缺点，那如何把两者的缺点去除呢，我们来尝试一下：

// 父构造函数
    function Parent(name) { 
        this.name = name || 'Adam';
    }
    
    // 给原型添加say功能
    Parent.prototype.say = function () { 
        return this.name;
    };
    
    // Child构造函数
    function Child(name) { 
        Parent.apply(this, arguments);
    }
    
    Child.prototype = new Parent();
    
    var kid = new Child("Patrick");
    console.log(kid.name); // "Patrick"
    console.log(typeof kid.say); // function
    console.log(kid.say()); // Patrick
    console.dir(kid);
    delete kid.name;
    console.log(kid.say()); // "Adam"

运行起来，一切正常，但是有没有发现，Parent构造函数执行了两次，所以说，虽然程序可用，但是效率很低。

--------------------

###  模式8：共享原型 ###

共享原型是指Child和Parent使用同样的原型，代码如下：

确定还是一样，Child的参数没有正确接收到。

--------------------

###  模式9：临时构造函数 ###

首先借用构造函数，然后将Child的原型设置为该借用构造函数的实例，最后恢复Child原型的构造函数。代码如下：

/* 闭包 */
    var inherit = (function () { 
        var F = function () { 
        };
        return function (C, P) { 
            F.prototype = P.prototype;
            C.prototype = new F();
            C.uber = P.prototype;
            C.prototype.constructor = C;
        }
    } ());
    
    function Parent(name) { 
        this.name = name || 'Adam';
    }
    
    // 给原型添加say功能
    Parent.prototype.say = function () { 
        return this.name;
    };
    
    // Child构造函数
    function Child(name) { 
    }
    
    inherit(Child, Parent);
    
    var kid = new Child();
    console.log(kid.name); // undefined
    console.log(typeof kid.say); // function
    kid.name = 'Patrick';
    console.log(kid.say()); // Patrick
    var kid2 = new Child("Tom");
    console.log(kid.say()); 
    console.log(kid.constructor.name); // Child
    console.log(kid.constructor === Parent); // false

问题照旧，Child不能正常接收参数。

--------------------

###  模式10：klass ###

这个模式，先上代码吧：

怎么样？看着是不是有点晕，说好点，该模式的语法和规范拧得和别的语言一样，你愿意用么？咳。。。

--------------------

###  总结 ###

给大家分享的10个代码复用模式，前面4种模式推荐使用。后面6种模式尽量避免使用。虽然后面6种模式，在某种特殊情况下实现了某些功能，但是都存在各自的缺点，所以一般情况，请大家要避免使用。

本文完~