zoukankan      html  css  js  c++  java
  • JavaScript函数绑定

    JavaScript函数绑定

    一个简单的函数绑定

    在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,然而这种绑定方式和普通函数相比需要更多的内存开销,所以尽量只在必要的时候使用。

     
     
    分类: JavaScript
  • 相关阅读:
    ECharts
    JSON(及其在ajax前后端交互的过程)小识
    fullpage.js全屏滚动插件使用小结
    php json_encode数据格式化
    jQuery的DOM操作实例(3)——创建节点&&编写一个弹窗
    jQuery的DOM操作实例(2)——拖拽效果&&拓展插件
    jQuery的DOM操作实例(1)——选项卡&&Tab切换
    日常css技巧小结(2)-- inline-block带来的迷惑
    日常css技巧小结(1)--背景透明度改变对内容无影响
    浅析JavaScript事件流——冒泡
  • 原文地址:https://www.cnblogs.com/Leo_wl/p/3252383.html
Copyright © 2011-2022 走看看