JavaScript函数绑定
来源:互联网 发布:怎样看出淘宝是包邮的 编辑:程序博客网 时间:2024/05/29 11:37
一个简单的函数绑定
在JavaScript与DOM交互中经常需要使用函数绑定,定义一个函数然后将其绑定到特定DOM元素或集合的某个事件触发程序上,绑定函数经常和回调函数及事件处理程序一起使用,以便把函数作为变量传递的同时保留代码执行环境。
<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对象,handler.handlerFun()方法被分配为DOM按钮的click事件处理程序。设计意图是这样的:当点击按钮的时候触发该方法,弹出对话框显示handler定义的message,然而点击后对话框内容却是undefined。熟悉闭包的同学可以轻松看出来这个问题在于没有保存handler.handlerFun()方法的执行环境,this对象最后指向了DOM按钮而非handler。可以使用闭包解决此问题,修改函数绑定语句
document.getElementById('btnTest').onclick=function(){ handler.handlerFun(); }
这样就可以得到预期的结果,这个解决方案在onclick程序内部使用一个闭包直接调用handler.handlerFun()方法,当然这是特定于此场景的解决方案,创建多个闭包可能会令代码难以理解和调试。
自定义bind函数
function bind(fn,context){ return function(){ return fn.apply(context,arguments); }; } document.getElementById('btnTest').onclick=bind(handler.handlerFun,handler);
通过自定义的bind函数可以将函数绑定到指定环境,bind()函数接收两个参数:一个绑定函数,一个执行环境,并返回一个在执行环境中调用绑定函数的函数。看起来很简单,但是其功能很强大,在bing()中创建了一个闭包,闭包使用apply()调用传入的函数,并给apply()传入执行环境和参数,这里的arguments是内部匿名函数的,而非bind()的。当调用返回的函数时,它会在给定的函数中执行被传入的函数,并给出所有参数。上面例子的调用handler.handlerFun依旧可以得到参数event,因为所有参数在都通过绑定的函数传递给它了。
小结
一旦要将某个函数以函数指针的形式传递,同时该函数必须在特定的环境中执行,自定义的bind()函数就可以使用,他们主要用于事件处理程序及setTimeout和setInterval,然而这种绑定方式和普通函数相比需要更多的内存开销,所以尽量只在必要的时候使用。
- JavaScript函数绑定
- javascript函数绑定
- javascript中的函数绑定
- JavaScript函数绑定
- es6 javascript 函数绑定
- Javascript函数绑定
- Javascript-bind绑定函数
- JavaScript-bind()与函数绑定
- javascript动态绑定带参数的函数
- 动态绑定javascript函数的共用方法
- javascript使用bind()函数绑定this
- JavaScript之函数绑定与函数柯里化(高级函数)
- JavaScript函数绑定Demo以及函数Currying柯里化
- javascript中动态绑定带参数的函数
- javascript 动态绑定函数的参数传递例子
- JavaScript跨浏览器的添加删除事件绑定函数
- JavaScript跨浏览器的添加删除事件绑定函数
- JavaScript中为事件句柄绑定监听函数
- 业余04—VC++6.0Error spawning cl.exe路径错误解决办法
- 【数据结构学习2】线性表,顺序表定义中详细表述。
- c#中的关键字out是什么意思?ref是什么意思?它们有什么区别?
- 使用c3p0与DBCP连接池,造成的MySql 8小时问题解决方案
- Scala语言扫盲第四篇:类与对象
- JavaScript函数绑定
- Redis数据类型之String类型
- 二分查找
- Cocos2d-过渡篇(三) 触摸机制
- 爬取糗事百科文字段子,(2016年10月22日可用)
- 欢迎使用CSDN-markdown编辑器
- dfs找环
- 欢迎加入我们的iOS开发交流群
- 编辑距离(动态规划法)