详解JavaScript函数绑定


Posted in Javascript onAugust 18, 2013
<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 相关文章推荐
双击滚屏-常用推荐
Nov 29 Javascript
利用javascript的面向对象的特性实现限制试用期
Aug 04 Javascript
JavaScript获取XML数据附示例截图
Mar 05 Javascript
jquery ajax请求方式与提示用户正在处理请稍等
Sep 01 Javascript
在Node.js应用中读写Redis数据库的简单方法
Jun 30 Javascript
JavaScript实现的浮动层框架用法实例分析
Oct 10 Javascript
Bootstrap 粘页脚效果
Mar 28 Javascript
Javascript实现图片懒加载插件的方法
Oct 20 Javascript
angular4自定义组件详解
Sep 28 Javascript
详解超简单的react服务器渲染(ssr)入坑指南
Feb 28 Javascript
基于Vue实现电商SKU组合算法问题
May 29 Javascript
javascript实现贪吃蛇小练习
Jul 05 Javascript
jQuery 绑定事件到动态创建的元素上的方法实例
Aug 18 #Javascript
jQuery焦点图切换特效插件封装实例
Aug 18 #Javascript
JavaScript生成GUID的多种算法小结
Aug 18 #Javascript
实测jquery data()如何存值
Aug 18 #Javascript
js兼容的placeholder属性详解
Aug 18 #Javascript
JQuery分别取得每行最后一列和最后一行的示例代码
Aug 18 #Javascript
jquery验证表单中的单选与多选实例
Aug 18 #Javascript
You might like
PHP中HTTP方式下的Gzip压缩传输方法举偶
2007/02/15 PHP
PHP开发负载均衡指南
2010/07/17 PHP
php通用防注入程序 推荐
2011/02/26 PHP
php匹配字符中链接地址的方法
2014/12/22 PHP
Laravel框架基于ajax和layer.js实现无刷新删除功能示例
2019/01/17 PHP
点击文章内容处弹出页面代码
2009/10/01 Javascript
让iframe子窗体取父窗体地址栏参数(querystring)
2009/10/13 Javascript
js中settimeout方法加参数的使用实例
2014/02/27 Javascript
js实现数字每三位加逗号的方法
2015/02/05 Javascript
浅谈JavaScript事件的属性列表
2015/03/01 Javascript
Angular实现form自动布局
2016/01/28 Javascript
easyui window refresh 刷新两次的解决方法(推荐)
2016/05/18 Javascript
jQuery实现表格文本框淡入更改值后淡出效果
2016/09/27 Javascript
原生javascript实现分页效果
2017/04/21 Javascript
详解vue2.6插槽更新v-slot用法总结
2019/03/09 Javascript
Node.js对MongoDB进行增删改查操作的实例代码
2019/04/18 Javascript
JS实现获取当前所在周的周六、周日示例分析
2019/05/11 Javascript
JS实现前端动态分页码代码实例
2020/06/02 Javascript
vue根据条件不同显示不同按钮的操作
2020/08/04 Javascript
vue 将多个过滤器封装到一个文件中的代码详解
2020/09/05 Javascript
Python and、or以及and-or语法总结
2015/04/14 Python
pandas 读取各种格式文件的方法
2018/06/22 Python
Python基于分析Ajax请求实现抓取今日头条街拍图集功能示例
2018/07/19 Python
Tensorflow不支持AVX2指令集的解决方法
2020/02/03 Python
Windows上安装tensorflow  详细教程(图文详解)
2020/02/04 Python
利用scikitlearn画ROC曲线实例
2020/07/02 Python
python使用dlib进行人脸检测和关键点的示例
2020/12/05 Python
python实现启动一个外部程序,并且不阻塞当前进程
2020/12/05 Python
详解Django关于StreamingHttpResponse与FileResponse文件下载的最优方法
2021/01/07 Python
html5是什么_动力节点Java学院整理
2017/07/07 HTML / CSS
经管应届生求职信
2013/11/17 职场文书
主持人演讲稿范文
2013/12/28 职场文书
事假请假条范文
2014/04/11 职场文书
保护环境建议书400字
2014/05/13 职场文书
首都博物馆观后感
2015/06/05 职场文书
运动会班级前导词
2015/07/20 职场文书