JavaScript 性能优化之函数绑定

分手后的思念是犯贱 2023-02-15 01:24 18阅读 0赞

**函数绑定**：在特定的 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()。** **然而，被绑定函数与普通函数相比有更多的开销，它们需要更多内存，同时也因为多重函数调用稍微慢一点，所以最好只在必要时使用。**

--------------------

愿你的坚持终有收获。

发表评论取消回复

表情：

评论列表（有 0 条评论，18人围观）

还没有评论，来说两句吧...

相关阅读

相关 JavaScript中bind函数，键盘绑定事件

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti

╰半橙微兮°/ 2023年02月18日 15:22/ 0 赞/ 24 阅读

相关 JavaScript自定义函数——bind()事件绑定

直接拿走，兼容IE8 / 指定元素绑定响应函数 @param obj 绑定事件的对象 @param eventSt

深碍√TFBOYSˉ_/ 2023年02月16日 15:27/ 0 赞/ 148 阅读

相关 JavaScript 性能优化之函数绑定

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

分手后的思念是犯贱/ 2023年02月15日 01:24/ 0 赞/ 19 阅读

相关 JavaScript 性能优化之惰性加载函数

在实际开发中，我们编写的大多数JavaScript代码包含大量的 if…else语句或者 try… catch 语句来做功能检测。举一个简单的例子：事件的绑定，我们会首先

绝地灬酷狼/ 2023年02月14日 15:47/ 0 赞/ 117 阅读

相关 JavaScript自定义快捷函数绑定

当需要频繁地为名称唯一的元素(id选择器)绑定点击事件时，宜采用JS OOP的有关思想降低代码的耦合度以提高代码的重用性。 <input type="submit"

曾经终败给现在/ 2022年12月22日 15:26/ 0 赞/ 293 阅读

相关事件绑定/解绑函数

事件绑定: 标准:元素.addEventListener(事件类型,事件处理函数,是否捕获); IE:元素.attachEventr(on+

雨点打透心脏的1/2处/ 2022年09月10日 04:21/ 0 赞/ 332 阅读

相关 JavaScript性能优化技巧之函数节流

在写上一篇获取宽高度的博客的时候发现了一个问题，设置了`$(window).resize()`和`$(window).scroll()`的时候，函数调用的次数特别

悠悠/ 2022年07月17日 02:13/ 0 赞/ 304 阅读

相关函数绑定器

函数绑定器不能绑定重载函数，无法识别。仿函数又叫函数绑定器主要是把一个类的成员函数当成一个普通函数使用。 / 仿函数又叫函

港控/mmm°/ 2022年07月14日 20:55/ 0 赞/ 291 阅读

相关 JavaScript事件绑定

JavaScript事件绑定 -------------------- JavaScript也称ECMAScript，是一种动态类型、弱类型、基于原型的直译式脚本语言；

刺骨的言语ヽ痛彻心扉/ 2022年06月06日 02:15/ 0 赞/ 461 阅读

相关 onload事件绑定多个javascript函数代码

onload事件是让这个函数只在网页加载完成后才得以执行，特别是在DOM操作中，XHTML文档加载完成之前，DOM是不完整的。下面来看看onload具体应用： win

左手的ㄟ右手/ 2021年11月23日 02:14/ 0 赞/ 407 阅读