显式绑定与硬绑定

硬绑定

function foo(){
    console.log( this.a );
}

var obj = {
    a:2
};

var bar = function(){
    foo.call(obj);
};

bar();

setTimeout(bar,100); //2

//硬绑定的bar不可能再修改它的this
bar.call( window ); // 2
//传参又没用上~~

硬绑定的典型应用场景就是创建一个包裹函数,负责接受参数并返回值:

function foo(something){
    console.log( this.a, something);
    return this.a + something;
}

var obj = {
    a:2
};

var bar = function() {
    return foo.apply( obj, arguments );
};

var b = bar( 3 );//  2 3
console.log( b );//5

另一种使用方法是创建一个可以重复使用的辅助函数:

function foo(something){
    console.log( this.a, something);
    return this.a + something;
}

//简单辅助绑定函数
function bind(fn, obj){
    return function(){
        return fn.apply( obj , arguments );
    };
}

var obj = {
    a:2
};

var bar = bind( foo ,obj );

var b = bar( 3 );//2 3 
console.log( b ); // 5

ES5提供了内置的方法Function.prototype.bind,用法如下:

function foo(something) {
    console.log( this.a, something);
    return this.a + something;
}

var obj = {
    a:2
};

var bar = foo.bind( obj );
var b = bar( 3 ); //2 3
console.log( b ); // 5

bind( ... )会返回一个硬绑定的新函数,它会把你指定的参数设置为this的上下文并调用原始函数。

第三方库的许多函数,以及JavaScript语言和宿主环境中许多新的内置函数,都提供了一个可选的参数,通常被称为“上下文”,其作用和bind(...)一样,确保你的回调函数使用指定的this.

function foo(el){
    console.log( el, this.id );
}

var obj = {
    id : "awesome"
};

//调用foo(...)时把this绑定到obj
[1,2,3].forEach(foo,obj);
//1 awesome 2 awesome 3 awesome

Last updated