javascript代码复用（四）-混入、借用方法和绑定

浏览数：21 / 时间：2015年06月08日

这篇继续说js的现代复用模式：混入、借用方法和绑定。

混入

可以针对前面提到的通过属性复制实现代码复用的想法进行一个扩展，就是混入(mix-in)。混入并不是复制一个完整的对象，而是从多个对象中复制出任意的成员并将这些成员组合成一个新的对象。

混入的实现并不难，只需要遍历每个参数，并且复制出传递给这个函数的每个对象中的每个属性。

function mix(){
    var arg,prop,child={};
    for(arg=0:arg<arguments.length;arg++){
        for(arguments in arg){
            if(arguments(arg).hasOwnProperty(prop)){
                child[prop] = arguments[arg][prop];
            }
        }
    }
    return child;
}

现在，有了一个通用的mix-in函数，可以向它传递任意数量的对象，其结果将获得一个具有所有源对象属性的新对象，一个调用的例子：

var cake = mix(
    {eggs : 2,large : true},
    {butter : 1,sorted : true},
    {flour : "3 cups"},
    {suger : "sure!"}
);
console.dir(cake);

下面是控制台的输出：

      butter          1
     eggs            2
     flour           "3 cups"
     large           true
     sorted          true
     sugar           "sure!"

借用方法

有时可能恰好仅需要现有对象其中的一个或两个方法，在想要重用方法的同时，又不希望和源对象是父子的继承关系，也就是只想使用所需要的方法，而不需要那些永远用不到的其他方法。这种情况下，可以使用借用方法(borrowing method)来实现，即使用call()和apply()，区别就是传参的区别。

下面是一个例子，借用了数组的方法：

function f(){
    var args = [].slice.call(arguments,1,3);
    return args;
}

f(1,2,3,4,5,6);//[2,3]

其中创建空数组是为了使用数组的slice方法，也可以从Array的原型中借用方法，即Array.prototype.slice.call,这个需要输更长的字符，但是可以节省创建一个空数组的工作。
借用方法，不是通过call()和apply()就是通过简单的赋值，在借用方法的内部，this所指向的对象是基于调用表达式而确定的，但更多时候，最好可以锁定this的值，或者把它绑定到特定对象并预先确定该对象。

参考下面的例子，one对象有一个say()的方法：

var one = {
    name : "object",
    say : function(greet){
        return greet+","+this.name;
    }
};

one.say("hi");//"hi,object"

另一个对象two中没有say方法，但是可以从one那里借用：

var two = {
    name : "another object"
};
one.say.apply(two,["hello"]);//"hello,another object"

上面借用的say()方法中的this指向了two,所以this.name是"another object".但是在什么场景中，应该给函数指针赋值一个全局变量，或者将函数作为回调函数传递？在程序中有这样的应用，并且出现了问题。

var say = one.say;
say("hoho");//"hoho,undefined"

var yetanother = {
    name : "Yet another object",
    method : function(callback){
       return callback("Hola");
    }
};
yetanother.method(one.say);//"Hola,undefined"

在上面两种情况下this都指向了全局对象，并且代码都没有按预期运行。为了绑定对象与方法之间的关系，可以用下面的一个简单的函数：

function bind(o,m){
    return function(){
        return m.apply(o,arguments);
    };
}

bind()接受了一个对象o和一个方法m,并将它们绑定起来，然后返回另一个函数。返回的函数可以通过闭包来访问o和m。所以在bind()返回后仍然可以访问o和m.可以使用bind()创建一个新函数：

var twosay = bind(two,one.say);
twosay("yo");//"yo,another object"

无论怎么调用twosay(),这个方法总是绑定到对象two上。

ES5中的bind()

ES5将bind()添加到Function.prototype,使得bind()像call()apply()一样易用。可以执行下面的表达式：

var newFunc = obj.someFunc.bind(myobj,1,2,3);

就是将someFunc()与myobj绑定到一起，并填充someFunc()的前3个参数。
在不支持ES5的环境下面运行的时候，看看怎么实现Function.prototype.bind():

if (typeof Function.prototype.bind === "undefined"){
    Function.prototype.bind = function(thisArg){
        var fn = this,
             slice = Array.prototype.slice,
             args = slice.call(arguments,1);

        return function(){
            return fn.apply(thisArg,args.concat(slice.call(arguments)));
        };
    };
}

它拼接了参数列表，即传给bind()的参数（第一个除外），以及那些传给由bind()返回新函数的参数，新函数将在后面调用。一个调用例子：

var twosay2 = one.say.bind(two);
twosay2("Bonjour");//"Bonjour,another object"

也可以传递一个参数：

var twosay3 = one.say.bind(two,"Nihao");
twosay3();//"Nihao,another object"

小结

在javascript中可能并不会像C#或Java一样经常面临继承的问题，一些原因是js库用一些方法解决了这个问题，另一些原因是在js中很少需要建立长而且复杂的继承链。在静态强类型语言中，继承可能是唯一复用代码的方法，但在js中经常有更简洁并且优雅的方法，包括借用方法，绑定，复制属性，及从多个对象中混入属性等方法。毕竟，代码重用才是最终目的，继承只是实现这个目标的方法之一。

--end--

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

javascript代码复用（四）-混入、借用方法和绑定