一个简单的函数绑定

在JavaScript与DOM交互中经常需要使用函数绑定，定义一个函数然后将其绑定到特定DOM元素或集合的某个事件触发程序上，绑定函数经常和回调函数及事件处理程序一起使用，以便把函数作为变量传递的同时保留代码执行环境。

  1. <body>
  2.  
  3.     <input id="btnTest" type="button" value="Button"/>
  4.         <script type="text/javascript">
  5.             var handler={
  6.                 message:"Event handled.",
  7.                 handlerFun:function(){
  8.                     alert(this.message);
  9.                 }
  10.             };
  11.  
  12.             document.getElementById('btnTest').onclick=handler.handlerFun;
  13.         </script>
  14.     </body>

上面的例子创建了一个handler对象，handler.handlerFun()方法被分配为DOM按钮的click事件处理程序。设计意图是这样的：当点击按钮的时候触发该方法，弹出对话框显示handler定义的message，然而点击后对话框内容却是undefined。熟悉闭包的同学可以轻松看出来这个问题在于没有保存handler.handlerFun()方法的执行环境，this对象最后指向了DOM按钮而非handler。可以使用闭包解决此问题，修改函数绑定语句

  1. document.getElementById('btnTest').onclick=function(){
  2.                 handler.handlerFun();
  3.             }

这样就可以得到预期的结果，这个解决方案在onclick程序内部使用一个闭包直接调用handler.handlerFun()方法，当然这是特定于此场景的解决方案，创建多个闭包可能会令代码难以理解和调试。

自定义bind函数

  1. function bind(fn,context){
  2.                 return function(){
  3.                     return fn.apply(context,arguments);
  4.                 };
  5.             }
  6.  
  7.             document.getElementById('btnTest').onclick=bind(handler.handlerFun,handler);

通过自定义的bind函数可以将函数绑定到指定环境，bind()函数接收两个参数：一个绑定函数，一个执行环境，并返回一个在执行环境中调用绑定函数的函数。看起来很简单，但是其功能很强大，在bing()中创建了一个闭包，闭包使用apply()调用传入的函数，并给apply()传入执行环境和参数，这里的arguments是内部匿名函数的，而非bind()的。当调用返回的函数时，它会在给定的函数中执行被传入的函数，并给出所有参数。上面例子的调用handler.handlerFun依旧可以得到参数event，因为所有参数在都通过绑定的函数传递给它了。

小结

一旦要将某个函数以函数指针的形式传递，同时该函数必须在特定的环境中执行，自定义的bind()函数就可以使用，他们主要用于事件处理程序及setTimeout和setInterval,然而这种绑定方式和普通函数相比需要更多的内存开销，所以尽量只在必要的时候使用。

JavaScript函数绑定的更多相关文章

  1. 把多个JavaScript函数绑定到onload事件处理函数上的技巧

    一,onload事件发生条件 用户进入页面且页面所有元素都加载完毕.如果在页面的初始位置添加一个JavaScript函数,由于文档没有加载完毕,DOM不完整,可能导致函数执行错误或者达不到我们想要的效 ...

  2. 把多个JavaScript函数绑定到onload事件处理函数上

    为了让函数只在页面加载完毕后才得到执行,我们会把函数绑定到onload事件上: window.onload = userFunction 但如果有两个函数:firstFunction() 和 seco ...

  3. JavaScript 函数绑定 Function.prototype.bind

    ECMAScript Edition5 IE9+支持原生,作用为将一个对象的方法绑定到另一个对象上执行. Function.prototype.bind = Function.prototype.bi ...

  4. 《javascript dom编程艺术》笔记（一）——优雅降级、向后兼容、多个函数绑定onload函数

    刚刚开始自学前端,如果不对请指正:欢迎各位技术大牛指点. 开始学习<javascript dom编程艺术>,整理一下学习到的知识.今天刚刚看到第六章,记下get到的几个知识点. 优雅降级 ...

  5. javascript多种继承方式(函数式，浅复制，深复制，函数绑定和借用)

    函数式继承: var object = function (obj) { if (typeof Object.create !== 'undefined') { return Object.creat ...

  6. Javascript函数重载，存在呢—还是存在呢？

    1.What's is 函数重载? );//Here is int 10 print("ten");//Here is string ten } 可以发现在C++中会根据参数的类型 ...

  7. JavaScript语言精粹读书笔记 - JavaScript函数

    JavaScript是披着C族语言外衣的LISP,除了词法上与C族语言相似以外,其他几乎没有相似之处. JavaScript 函数: 函数包含一组语句,他们是JavaScript的基础模块单元,用于代 ...

  8. javascript函数一共可分为五类： ·常规函数 ·数组函数 ·日期函数 ·数学函数 ·字符串函数

    javascript函数一共可分为五类:    ·常规函数    ·数组函数    ·日期函数    ·数学函数    ·字符串函数    1.常规函数    javascript常规函数包括以下9个 ...

  9. 深入理解javascript函数系列第一篇——函数概述

    × 目录 [1]定义 [2]返回值 [3]调用 前面的话 函数对任何一门语言来说都是一个核心的概念.通过函数可以封装任意多条语句,而且可以在任何地方.任何时候调用执行.在javascript里,函数即 ...

随机推荐

  1. jqeury datatable

    1.自定义列信息    "aoColumnDefs":[                               {                               ...

  2. poj 2337 有向图输出欧拉路径

    Catenyms Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 10186   Accepted: 2650 Descrip ...

  3. eclipse tomcat maven热部署

    1.  tomcat插件 如果是Kepler的话,已经自带了tomcat插件,如果没有,到http://www.eclipsetotale.com/tomcatPlugin.html下载安装或在线安装 ...

  4. 2015年可用的TRACKER服务器大全

    udp://tracker.openbittorrent.com:80/announceudp://tracker.publicbt.com:80/announcehttp://pubt.net:27 ...

  5. 比较两个Long对象值

    比较两个Long对象的值是否相等,不可以使用双等号进行比较,(long int Integer可以用双等号进行比较)可以采用如下方式: 1.使用equals方法进行比较 Long a=new Long ...

  6. error C2065: 'INVALID_SET_FILE_POINTER' : undeclared identifier

    Searching MSDN for that constant brings up one result: it's a failure code for SetFilePointer() and ...

  7. .net WebApi中使用swagger

    我在WebApi中使用swagger的时候发现会出现很多问题,搜索很多地方都没找到完全解决问题的方法,后面自己解决了,希望对于遇到同样问题朋友有帮助.我将先一步一步的演示项目中解决swagger遇到问 ...

  8. IOS网络请求原理

    1,为什么要用到网络,  只有通过网络跟外界进行数据交互,数据更新,应用才能保持哦新鲜.活力 如果没有网络,也就缺少数据变化.变成一滩死水. 2, 良好的移动网络应用 ＝ 良好的UI + 良好的用户体 ...

  9. fiddler的使用

    查看fiddler监听的端口: tools=>fiddler options=>connections=>fiddler listens on port 8888 如果想抓curl发 ...

  10. var关键字详解

    1,var只能定义局部变量,而不能定义成员变量 2,定义的时候必须同时完成初始化,而不能使用var定义变量为null 3,var本身不是一个新类型,只是用来修饰一个可以推断出具体类型的局部变量 var ...