详解JavaScript函数绑定
更新时间：2013年08月18日 17:47:10 作者：
在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,然而这种绑定方式和普通函数相比需要更多的内存开销，所以尽量只在必要的时候使用。
相关文章
字符串的操作在js中非常频繁，也非常重要。以往看完书之后都能记得非常清楚，但稍微隔一段时间不用，便会忘得差不多，记性不好是硬伤啊。。。今天就对字符串的一些常用操作做个整理，一者加深印象，二者方便今后温习查阅。2016-07-07
本篇文章给大家介绍了10款扩展Web表单的javascript的插件，一起跟着小编来学习下吧。2017-12-12
这篇文章主要介绍了JavaScript DOM进阶,需要的朋友可以参考下2015-04-04
这篇文章主要介绍了Redis基本知识、安装、部署、配置笔记,本文讲解了基本知识、安装Redis、Redis的配置等知识,需要的朋友可以参考下2015-03-03
这篇文章主要为大家详细介绍了JavaScript中splice的使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2022-03-03
input按钮的事件处理大全,收集的是网页中常用的一些事件处理，需要的朋友可以收藏下。2010-12-12
本文主要讲解了JavaScript中BOM和DOM，BOM为浏览器对象模型，DOM 为文档对象模型，两者之间有很大的区别，感兴趣的小伙伴可以阅读一下这篇文章，了解相关内容2021-08-08
JavaScript基础之Array forEach使用示例
这篇文章主要为大家介绍了JavaScript基础之Array forEach使用示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-12-12
轻松掌握JavaScript中的Math object数学对象
Math对象或者说是类型旗下拥有很多平时常用的数学函数,虽然并不像Date和String那样拥有类似于类和方法那样的使用方式,不过并不妨碍您通过本文来轻松掌握JavaScript中的Math object数学对象^^2016-05-05
JavaScript中String.match()方法的使用详解
这篇文章主要介绍了JavaScript中String.match()方法的使用详解,是JS入门学习中的基础知识,需要的朋友可以参考下2015-06-06
最新评论