javascript交互如何使用函数绑定代码详解
在javascript与DOM交互中经常需要使用函数绑定,定义一个函数然后将其绑定到特定DOM元素或集合的某个事件触发程序上,绑定函数经常和回调函数及事件处理程序一起使用,以便把函数作为变量传递的同时保留代码执行环境
<button id="btn">按钮</button> <script> var handler={ message:"Event handled.", handlerFun:function(){ alert(this.message); } }; btn.onclick = handler.handlerFun; </script>
上面的代码创建了一个叫做handler的对象。handler.handlerFun()方法被分配为一个DOM按钮的事件处理程序。当按下该按钮时,就调用该函数,显示一个警告框。虽然貌似警告框应该显示Event handled,然而实际上显示的是undefiend。这个问题在于没有保存handler.handleClick()的环境,所以this对象最后是指向了DOM按钮而非handler
可以使用闭包来修正这个问题
<button id="btn">按钮</button> <script> var handler={ message:"Event handled.", handlerFun:function(){ alert(this.message); } }; btn.onclick = function(){ handler.handlerFun(); } </script>
当然这是特定于此场景的解决方案,创建多个闭包可能会令代码难以理解和调试。更好的办法是使用函数绑定
一个简单的绑定函数bind()接受一个函数和一个环境,并返回一个在给定环境中调用给定函数的函数,并且将所有参数原封不动传递过去
function bind(fn,context){ return function(){ return fn.apply(context,arguments); } }
这个函数似乎简单,但其功能是非常强大的。在bind()中创建了一个闭包,闭包使用apply()调用传入的函数,并给apply()传递context对象和参数。当调用返回的函数时,它会在给定环境中执行被传入的函数并给出所有参数
<button id="btn">按钮</button> <script> 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); </script>
ECMAScript5为所有函数定义了一个原生的bind()方法,进一步简化了操作。
只要是将某个函数指针以值的形式进行传递,同时该函数必须在特定环境中执行,被绑定函数的效用就突显出来了。它们主要用于事件处理程序以及setTimeout()和setInterval()。然而,被绑定函数与普通函数相比有更多的开销,它们需要更多内存,同时也因为多重函数调用稍微慢一点,所以最好只在必要时使用。
以上就是javascript交互如何使用函数绑定代码详解的详细内容,更多请关注其它相关文章!
上一篇: Ajax中post方法直接返回以0开头数字出错问题分析
下一篇: toPrecision函数怎么使用
推荐阅读
-
javascript如何使用函数random来实现课堂随机点名方法详解
-
JavaScript递归函数详解:如何使用递归及简单的递归案例
-
轻量级JavaScript模版引擎mustache.js如何使用代码详解
-
如何在JavaScript函数式编程里使用Map和Reduce方法的详解
-
详谈JavaScript函数闭包使用及注意事项代码详解
-
如何使用javascript写模板引擎代码思路和实例详解
-
javascript如何使用函数和返回值用法实例详解
-
如何使用javascript和php中实现观察者模式代码详解
-
JavaScript中如何判断函数和变量存在的实例代码详解
-
如何使用javascript加载脚本并执行回调代码实例详解