函数绑定

函数绑定
首先我们来看看一段代码

var handler = {
   message: 'Hello,World!',
    handleClick: function(){
        console.log(this.message);
    }
}
var root = document.getElementById('root');
root.addEventListener('click',handler.handleClick);

我们想要的结果是’Hello,World!’,但这里的执行结果却是undefined，为什么呢？
因为执行环境的问题，这里的this最后指向的是DOM元素，而不是handler对象。
参考文章
解决方案：
1.闭包

var handler = {
   message: 'Hello,World!',
    handleClick: function(){
        console.log(this.message);
    }
}
var root = document.getElementById('root');
root.addEventListener('click',function(event){
    handler.handleClick(event);
});

创建多个闭包可能令代码难于理解和调试。
因此，很多JavaScript库实现了一个将函数绑定到指定环境的函数，这个函数一般叫bind()。

var handler = {
   message: 'Hello,World!',
    handleClick: function(){
        console.log(this.message);
    }
}

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

root.addEventListener('click',bind(handler.handleClick,handler));

ECMAscript提供了一个原生的bind方法，进一步简单了操作。你不用再自己定义bind方法，可以像这样直接使用。

root.addEventListener('click',handler.handleClick.bind(handler));