JavaScript 性能优化之函数绑定

函数绑定:在特定的 this 环境中,以指定参数调用另一个函数。常常与回调函数和事件处理程序一起使用一遍在将函数作为变量传递的同时保留代码执行环境。

        var handler = {
            name: "阿清",
            sayName: function(event) {
                alert(this.name);
            }
        };
        var btn = document.getElementById("btn");
        btn.addEventListener("click", handler.sayName, false) //undefiend

结果显示的是undefiend,这是因为没有保存handler .sayName() 的环境,所以 this 指向DOM按钮而非handler(在IE8中 this 指向window)。


解决方法:
ES5为所有的函数定义一个原生的 bind() 方法。

        var handler = {
            name: "阿清",
            sayName: function(event) {
                alert(this.name + ":" + event.type);
            }
        };
        var btn = document.getElementById("btn");
        btn.addEventListener("click", handler.sayName.bind(handler), false) //阿清:click

bind函数接收一个参数:一个环境。在给定的环境中调用函数。

只要是将某个函数指针以值的形式进行传递,同时该函数必须在特定环境中执行,被绑定函数的效用就突显出来了。它们主要用于事件处理程序以及setTimeout() 和setInterval()。 然而,被绑定函数与普通函数相比有更多的开销,它们需要更多内存,同时也因为多重函数调用稍微慢一点,所以最好只在必要时使用。




愿你的坚持终有收获。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值