函数绑定技巧是一个非常流行的高级技巧。
函数绑定要创建一个函数,可以在特定的this环境中以制定参数调用另一个函数。该技巧常常和回调函数与实践处理程序一起使用,以便在将函数作为变量传递的同时保留代码执行环境。例1如下:
var handler = { message: ‘Event handled‘, handleClick: function(e){ alert(this.message); } } var btn = document.getElementById(‘button‘); btn.addEventListener(‘click‘, handler.handlerClick);
当点击按钮的时候,就调用该函数,显示一个警告框,但是实际显示的内容是undefined而不是Event Handled,这个问题在于没有保存handler.handleClick()的环境,所以this对象是指向了DOM按钮而非handler这个对象。如下使用闭包来修正这个问题。
var handler = { message: ‘Event handled‘, handleClick: function(e){ alert(this.message); } } var btn = document.getElementById(‘button‘); btn.addEventListener(‘click‘, function(e){ handler.handleClick(e); });
var handler = { message: ‘Event handled‘, handleClick: function(e){ alert(this.message); } } var btn = document.getElementById(‘button‘); btn.addEventListener(‘click‘, handler.handleClick.bind(handler));;
原生的bind()方法和如下的自定义的bind()方法类似,需要传入做为this值的对象,支持原生bind())方法有IE9+,FireFox 4+和Chrome浏览器。
var handler = { message: ‘Event handled‘, handleClick: function(e){ alert(this.message); } } var btn = document.getElementById(‘button‘); btn.addEventListener(‘click‘, bind(handler.handleClick, handler)); function bind(fn, context){ return function(){ return fn.apply(context, arguments); } }