JS高级编程1-函数绑定

函数绑定

函数绑定

函数绑定就是为了纠正函数的执行上下文，特别是当函数中带有this关键字的时候，这一点尤其重要，稍微不小心，就会使函数的执行上下文发生跟预期不同的改变，导致代码执行上的错误。

函数绑定要创建一个函数，可以在特定环境中以指定参数调用另一个函数。

一个简单的bind()函数接收一个函数和一个环境，返回一个在给定环境中调用给定函数的函数，并且将所有参数原封不动地传递过去。

被绑定函数与普通函数相比有更多的开销，它们需要更多内存，同时也因为多重函数调用而稍微慢一点，最好只在必要时使用。

函数绑定具有3个特征：

第一个特征常常和回调函数及事件处理函数一起使用。

var handler = {
    message : 'Event handled',
    handleClick : function(event) {
        alert(this.message);
    }
};
var btn = document.getElementById('my-btn');
EventUtil.addHandler(btn, 'click', handler.handleClick);    //undefined

出现上述结果的原因在于没有保存handler.handleClick()环境（上下文环境），所以this对象最后指向了DOM按钮而非handler。可以使用闭包修正此问题：

var handler = {
    message : 'Event handled',
    handleClick : function(event) {
        alert(this.message);
    }
};
var btn = document.getElementById('my-btn');
EventUtil.addHandler(btn, "click", function(event) {
    handler.handleClick(event);
});

这是特定于这段代码的解决方案。创建多个闭包可能会令代码变得难于理解和调试，因此，很多JavaScript库实现了一个可以将函数绑定到指定环境的函数bind()。

bind()函数的功能是提供一个可选的执行上下文传递给函数，并且在bind()函数内部返回一个函数，以纠正在函数调用上出现的执行上下文发生的变化。最容易出现的错误就是回调函数和事件处理程序一起使用。

function bind(fn, context) {
    return function() {
        return fn.apply(context, arguments);
    };
}

在bind()中创建一个闭包，该闭包使用apply调用传入的参数，并为apply传递context对象和参数。

注意：这里使用的arguments对象是内部函数的，而非bind()的。在调用返回的函数时，会在给定的环境中执行被传入的函数并给出所有参数。

var handler = {
    message : 'Event handled',
    handleClick : function(event) {
        alert(this.message);
    }
};
var btn = document.getElementById('my-btn');
EventUtil.addHandler(btn, "click", bind(handler.handlerClick, handler));