JavaScript中bind()方法使用详解

作者:admin     字体:[增加 减小]    类型:原创
bind()是在ECMAScript5中新增的方法,用于将一个函数绑定到一个对象,成为其方法,还可以用于构造函数。

bind()是在ECMAScript5中新增的方法,但在ECMAScript3中可以轻易模拟。bind()方法的作用就是将函数绑定至某个对象。如下面的代码,

function f(y){return this.x+y}; //这个是待绑定的函数
var o = {x:1};  //将要绑定的对象
var g = f.bind(o);  //通过调用g(x)来调用o.f(x)
console.log(g(2));  //3

当在函数f()上调用bind()方法并传入一个对象o作为参数,这个方法将返回一个新函数,调用新函数将会把原始的函数f()当做o的方法来调用。传入新函数的任何实参都将传入原始函数。

可以通过如下代码,轻易地实现实现绑定:

function f(y){return this.x+y}; //这个是待绑定的函数
function bind(f,o){
    return function(){  
        return f.apply(o,arguments);
    }
}
var o ={x:1};
var g = bind(f,o);
console.log(g(2));

ECMAScript5中的bind()方法不仅仅是将函数绑定至一个对象,它还附带一些其他应用:除了第一个实参外,传入bind()的实参也会绑定至this,这个附带的应用是一种常见的函数式编程,有时也被称为“柯里化”(currying)。参照下面这个例子中的bind()方法的实现:

var sum = function(x,y){return x+y};    //返回两个实参的和值

//创建一个类似sum的新函数,但this的值绑定到null
//并且第一个参数绑定到1,这个新函数期望只传入一个实参
var succ = sum.bind(null,1);
console.log(succ(3));   //4

function f(y,z) { return this.x + y + z;};  //另外一个做累加计算的函数
var g = f.bind({x:1},2);    //绑定this和y
console.log(g(3));  //6

在ECMAScript3中对bind的实现

//ECMAScript3版本的Function.bind()方法
if(!Function.prototype.bind){
    Function.prototype.bind = function(o /*,args */) {
        //将this和arguments的值保存至变量中
        var self = this,boundArgs = arguments;

        //bind()方法的返回值是一个函数
        return function(){
            //创建一个实参列表,将传入bind()的第二个及后续的实参都传入这个函数
            var args = [],i;
            for(i=1;i<boundArgs.length;i++) args.push(boundArgs[i]);
            for(i=0;i<arguments.length;i++) args.push(arguments[i]);

            //现在将self作为o的方法来调用,传入这些实参
            return self.apply(o,args);
        }
    }
}

另外,bind()方法返回的函数还可以用做构造函数,此时将忽略传入bind()的this,原始函数就会以构造函数的形式调用,其实参也已经绑定。