var handler = {
message: "哈哈",
handleClick: function(event){
alert(this.message);
}
};
document.body.addEventListener("click", handler.handleClick, false); //点击的时候返回undefined而不是 "哈哈",因为this指向的是document.body,而这个对象没有message属性
因为handler.handleClick()的上下文环境没有被保存
改成下面就可以返回:
document.body.addEventListener("click", function(event) {
handler.handleClick(event);
}, false);
用闭包的方式调用handler.handleClick(event);就能保留对应上下文了
很多框架都有一个方法叫做bind(),就是为了解决这个问题,保留特定的上下文环境
function bind(fn, context){
return function(){
return fn.apply(context, arguments);
};
}
注意这里传进的arguments是内部函数的,而不是bind的。
ECMAScript 5 引入了原生的bind方法:
var handler = {
message: “Event handled”,
handleClick: function(event){
alert(this.message + “:” + event.type);
}
};
var btn = document.getElementById(“my-btn”);
EventUtil.addHandler(btn, “click”, handler.handleClick.bind(handler));
绑定函数通常用于event handle和setTimeout等,但是会有更多消耗,因为需要更多的内存和更多的函数调用,必要的时候才用。