做网站需要的资料,专业网页制作软件能帮助客户组织和管理,返回链接 网站惩罚检查 错误检查,百度竞价推广登录入口一个简单的函数绑定 在JavaScript与DOM交互中经常需要使用函数绑定#xff0c;定义一个函数然后将其绑定到特定DOM元素或集合的某个事件触发程序上#xff0c;绑定函数经常和回调函数及事件处理程序一起使用#xff0c;以便把函数作为变量传递的同时保留代码执行环境。 …一个简单的函数绑定 在JavaScript与DOM交互中经常需要使用函数绑定定义一个函数然后将其绑定到特定DOM元素或集合的某个事件触发程序上绑定函数经常和回调函数及事件处理程序一起使用以便把函数作为变量传递的同时保留代码执行环境。 bodyinput idbtnTest typebutton valueButton/script typetext/javascript var handler{message:Event handled.,handlerFun:function(){alert(this.message);}};document.getElementById(btnTest).οnclickhandler.handlerFun;/script/body 上面的例子创建了一个handler对象handler.handlerFun()方法被分配为DOM按钮的click事件处理程序。设计意图是这样的当点击按钮的时候触发该方法弹出对话框显示handler定义的message然而点击后对话框内容却是undefined。熟悉闭包的同学可以轻松看出来这个问题在于没有保存handler.handlerFun()方法的执行环境this对象最后指向了DOM按钮而非handler。可以使用闭包解决此问题修改函数绑定语句 document.getElementById(btnTest).οnclickfunction(){handler.handlerFun();} 这样就可以得到预期的结果这个解决方案在onclick程序内部使用一个闭包直接调用handler.handlerFun()方法当然这是特定于此场景的解决方案创建多个闭包可能会令代码难以理解和调试。 自定义bind函数 function bind(fn,context){return function(){return fn.apply(context,arguments);};}document.getElementById(btnTest).οnclickbind(handler.handlerFun,handler); 通过自定义的bind函数可以将函数绑定到指定环境bind()函数接收两个参数一个绑定函数一个执行环境并返回一个在执行环境中调用绑定函数的函数。看起来很简单但是其功能很强大在bing()中创建了一个闭包闭包使用apply()调用传入的函数并给apply()传入执行环境和参数这里的arguments是内部匿名函数的而非bind()的。当调用返回的函数时它会在给定的函数中执行被传入的函数并给出所有参数。上面例子的调用handler.handlerFun依旧可以得到参数event因为所有参数在都通过绑定的函数传递给它了。 小结 一旦要将某个函数以函数指针的形式传递同时该函数必须在特定的环境中执行自定义的bind()函数就可以使用他们主要用于事件处理程序及setTimeout和setInterval,然而这种绑定方式和普通函数相比需要更多的内存开销所以尽量只在必要的时候使用。
