首页 » 编写高质量代码:改善JavaScript程序的188个建议 » 编写高质量代码:改善JavaScript程序的188个建议全文在线阅读

《编写高质量代码:改善JavaScript程序的188个建议》建议73:函数绑定有价值

关灯直达底部

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

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

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

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

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


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));