详解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 相关文章推荐
QUnit jQuery的TDD框架
Nov 04 Javascript
js中查找最近的共有祖先元素的实现代码
Dec 30 Javascript
javascript 内存回收机制理解
Jan 17 Javascript
jQuery插件原来如此简单 jQuery插件的机制及实战
Feb 07 Javascript
js解析json读取List中的实体对象示例
Mar 11 Javascript
javascript与有限状态机详解
May 08 Javascript
微信小程序 标签传入数据
May 08 Javascript
vue 动态修改a标签的样式的方法
Jan 18 Javascript
JS实现运动缓冲效果的封装函数示例
Feb 18 Javascript
Layui数据表格之获取表格中所有的数据方法
Aug 20 Javascript
微信小程序实现页面下拉刷新和上拉加载功能详解
Dec 03 Javascript
vue+echarts实现动态折线图的方法与注意
Sep 01 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中上传大体积文件时需要的设置
2006/10/09 PHP
抓取并下载CSS中所有图片文件的php代码
2011/09/26 PHP
使用array_map简单搞定PHP删除文件、删除目录
2014/10/29 PHP
php版微信开发Token验证失败或请求URL超时问题的解决方法
2016/09/23 PHP
iOS+PHP注册登录系统 PHP部分(上)
2016/12/26 PHP
Thinkphp3.2实用篇之计算型验证码示例
2017/02/09 PHP
php实现将数据做成json的格式给前端使用
2018/08/21 PHP
菜鸟javascript基础资料整理3 正则
2010/12/06 Javascript
使图片旋转的3种解决方案
2013/11/21 Javascript
gridview生成时如何去掉style属性中的border-collapse
2014/09/30 Javascript
jquery图片切换插件
2015/03/16 Javascript
Bootstrap每天必学之导航条(二)
2016/03/01 Javascript
JavaScript模拟push
2016/03/06 Javascript
js判断登陆用户名及密码是否为空的简单实例
2016/05/16 Javascript
jQuery EasyUI Tab 选项卡问题小结
2016/08/16 Javascript
微信小程序手势操作之单触摸点与多触摸点
2017/03/10 Javascript
BootStrap中Table隐藏后显示问题的实现代码
2017/08/31 Javascript
从源码看angular/material2 中 dialog模块的实现方法
2017/10/18 Javascript
jQuery中图片展示插件highslide.js的简单dom
2018/04/22 jQuery
基于Vue2实现简易的省市区县三级联动组件效果
2018/11/05 Javascript
vue-cli安装使用流程步骤详解
2018/11/08 Javascript
vue鼠标悬停事件实例详解
2019/04/01 Javascript
通过JS深度判断两个对象字段相同
2019/06/14 Javascript
如何自定义微信小程序tabbar上边框的颜色
2019/07/09 Javascript
pyqt4教程之实现半透明的天气预报界面示例
2014/03/02 Python
Python机器学习之决策树算法实例详解
2017/12/06 Python
Python实现七彩蟒蛇绘制实例代码
2018/01/16 Python
只需7行Python代码玩转微信自动聊天
2019/01/27 Python
python实现简单图片物体标注工具
2019/03/18 Python
Python实现的读取文件内容并写入其他文件操作示例
2019/04/09 Python
PyTorch中topk函数的用法详解
2020/01/02 Python
python 解决tqdm模块不能单行显示的问题
2020/02/19 Python
2014年科普工作总结
2014/12/06 职场文书
培根随笔读书笔记
2015/07/01 职场文书
MySQL 分区表中分区键为什么必须是主键的一部分
2022/03/17 MySQL
Python中三种花式打印的示例详解
2022/03/19 Python