Shulou(Shulou.com)06/01 Report--

这篇文章给大家分享的是有关js如何实现函数绑定的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

函数绑定

在javascript与DOM交互中经常需要使用函数绑定，定义一个函数然后将其绑定到特定DOM元素或集合的某个事件触发程序上，绑定函数经常和回调函数及事件处理程序一起使用，以便把函数作为变量传递的同时保留代码执行环境。

按钮var handler = { message: "Event handled.", handlerFun: function() { alert(this.message); } }; btn.onclick = handler.handlerFun;

上面的代码创建了一个叫做handler的对象。handler.handlerFun()方法被分配为一个DOM按钮的事件处理程序。当按下该按钮时，就调用该函数，显示一个警告框。

虽然貌似警告框应该显示Event handled，然而实际上显示的是undefiend。这个问题在于没有保存handler.handleClick()的环境，所以this对象最后是指向了DOM按钮而非handler。

可以使用闭包来修正这个问题

按钮var handler = { message: "Event handled.", handlerFun: function() { alert(this.message); } }; btn.onclick = function() { handler.handlerFun(); }

当然这是特定于此场景的解决方案，创建多个闭包可能会令代码难以理解和调试。更好的办法是使用函数绑定。

一个简单的绑定函数bind()接受一个函数和一个环境，并返回一个在给定环境中调用给定函数的函数，并且将所有参数原封不动传递过去。

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

这个函数似乎简单，但其功能是非常强大的。在bind()中创建了一个闭包，闭包使用apply()调用传入的函数，并给apply()传递context对象和参数。当调用返回的函数时，它会在给定环境中执行被传入的函数并给出所有参数。

按钮function bind(fn, context) { return function() { return fn.apply(context, arguments); } } var handler = { message: "Event handled.", handlerFun: function() { alert(this.message); } }; btn.onclick = bind(handler.handlerFun, handler);

ECMAScript5为所有函数定义了一个原生的bind()方法，进一步简化了操作。

只要是将某个函数指针以值的形式进行传递，同时该函数必须在特定环境中执行，被绑定函数的效用就突显出来了。它们主要用于事件处理程序以及setTimeout()和setInterval()。

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

感谢各位的阅读!关于"js如何实现函数绑定"这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.