详解JavaScript函数绑定

函数绑定中的this指向问题<body>
<input id="btnTest" type="button" value="Button"/>
<script type="text/javascript">
var handler={
message:"Event handled.",
handlerFun:function(){
alert(this.message);
                }
            };
document.getElementById('btnTest').onclick=handler.handlerFun;
</script>
</body>

上述示例构建了一个handler对象，并将其handlerFun()方法赋值给DOM按钮的click事件处理程序。从设计意图来看，点击按钮时应触发该方法并弹出包含handler所定义message内容的对话框。然而实际运行结果显示对话框内容为undefined。熟悉闭包机制的开发者可以识别出，该问题的根源在于未保存handler.handlerFun()方法的执行上下文，导致this对象最终指向了DOM按钮元素而非handler对象。

document.getElementById('btnTest').onclick=function(){
handler.handlerFun();
            }

如此修改可获得预期结果。该方案在onclick处理程序内部利用闭包直接调用handler.handlerFun()方法。尽管此方案能解决特定场景下的问题，但创建多个闭包可能导致代码可读性降低且增加调试难度。

实现自定义bind函数

自定义bind函数

function bind(fn,context){
return function(){
return fn.apply(context,arguments);
                };
            }
document.getElementById('btnTest').onclick=bind(handler.handlerFun,handler);

通过自定义的bind函数，可以将函数绑定到指定的执行环境中。bind()函数接收两个参数：待绑定的函数和执行环境，并返回一个新函数，该新函数在指定环境中调用原函数。虽然实现看似简单，但其功能强大：bind()内部创建了一个闭包，该闭包利用apply()调用传入的函数，并将执行环境和参数传递给apply()。需要注意的是，这里的arguments指的是内部匿名函数的参数，而非bind()函数的参数。当调用返回的函数时，它会在给定的上下文中执行被传入的函数，并传递所有参数。在上述示例中，调用handler.handlerFun时依然可以获取event参数，因为所有参数均通过绑定函数传递给了它。

应用场景与性能总结

小结

当需要将函数以函数指针形式传递，且要求该函数在特定环境中执行时，自定义的bind()函数即可发挥作用。它主要用于事件处理程序以及setTimeout和setInterval等场景。然而，这种绑定方式相比普通函数调用需要消耗更多的内存资源，因此建议仅在必要时使用。