黑松山资源网

详解JavaScript函数绑定
站长资源 2026/9/3 佚名
2 0
黑松山资源网 Design By www.paidiu.com

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

黑松山资源网 Design By www.paidiu.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
黑松山资源网 Design By www.paidiu.com
www.paidiu.com 黑松山资源网
39,976影音资源
44,792技术资源
21,817软件资源
651,128站长资源

P70系列延期，华为新旗舰将在下月发布

3月20日消息，近期博主@数码闲聊站 透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。

而博主@定焦数码 爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？

根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网 更多链接
黑松山资源网 Design By www.paidiu.com