好的，各位亲爱的程序员朋友们，欢迎来到今天的“闭包奇妙夜”！🌙 今晚，咱们不聊风花雪月，只谈代码人生，深入探讨闭包这玩意儿在事件处理函数中的神奇应用，以及它如何像一位忠实的管家，帮你保存上下文，让你的代码逻辑不再迷路。
准备好了吗？让我们一起揭开闭包的神秘面纱！🧙♂️
第一幕：啥是闭包？别慌，咱先来段相声！
（两位演员闪亮登场）
甲： 哎，老兄，最近写代码遇到个怪事儿，有个函数，明明执行完了，里面的变量还赖着不走，死活占着茅坑不拉屎！
乙： 哟，听你这描述，八成是遇到闭包这妖孽了！
甲： 闭包？听着像个武林秘籍，难道练了能飞檐走壁？
乙： 比飞檐走壁还厉害！闭包就像一个“时间胶囊”，把函数执行时的上下文环境封存起来，即使函数执行完毕，这些信息也不会消失。
甲： 听着玄乎！能说点人话吗？
乙： 简单来说，闭包就是函数 + 函数诞生的环境。这个环境包含了函数可以访问的所有变量。
甲： 这么说，闭包就像个“记忆大师”，能记住过去发生的一切？
乙： Exactly! 闭包让函数拥有了“超能力”，可以记住并访问它被创建时的作用域。
（相声结束，进入正题）
好啦，笑过之后，咱们正式进入技术环节。闭包，英文名叫 Closure，这个词本身就带着一种“封闭”、“包裹”的意味。它是一种特殊的函数，能够访问并操作其词法作用域之外的变量。简单粗暴地说，就是函数记住了它出生时的环境。
举个栗子：
function outerFunction(outerVar) {
function innerFunction(innerVar) {
console.log(outerVar); // 访问外部函数的变量
console.log(innerVar); // 访问内部函数的变量
}
return innerFunction;
}
const myClosure = outerFunction("Hello");
myClosure("World"); // 输出 "Hello" 和 "World"在这个例子中，innerFunction 就是一个闭包。它被定义在 outerFunction 内部，并且可以访问 outerFunction 的变量 outerVar。即使 outerFunction 执行完毕，outerVar 的值仍然被 innerFunction “记住”了。
第二幕：闭包在事件处理函数中的华丽登场
现在，让我们把聚光灯打到事件处理函数上。事件处理函数，顾名思义，就是用来处理各种事件的，比如点击按钮、鼠标悬停、键盘输入等等。
在JavaScript中，事件处理函数通常是异步执行的。也就是说，当事件发生时，事件处理函数会被放入一个“待执行队列”，等待JavaScript引擎空闲时再执行。
问题来了：如果在事件处理函数中需要访问一些外部变量，而这些变量在事件发生时可能已经发生了变化，怎么办呢？
答案就是：闭包！
闭包可以确保事件处理函数访问到的是事件发生时的变量值，而不是事件处理函数执行时的变量值。
让我们看一个经典的例子：
<!DOCTYPE html>
<html>
<head>
<title>闭包与事件处理</title>
</head>
<body>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<script>
const listItems = document.querySelectorAll('li');
for (var i = 0; i < listItems.length; i++) { // 注意这里用的是 var
listItems[i].addEventListener('click', function() {
console.log('You clicked item #' + i); // 期望输出 1, 2, 3，但实际输出 3, 3, 3
});
}
</script>
</body>
</html>在这个例子中，我们给每个列表项添加了一个点击事件处理函数。当点击列表项时，我们希望输出该列表项的索引。
但是，实际运行结果却是：无论点击哪个列表项，都会输出 "You clicked item #3"。这是因为，当事件处理函数执行时，i 的值已经变成了3，因为循环已经执行完毕。
罪魁祸首就是 var 声明的变量 i，它具有函数作用域，而不是块级作用域。当循环结束后，i 的值停留在3，所有事件处理函数都共享这个值。
如何解决这个问题呢？
方法一：使用 IIFE (Immediately Invoked Function Expression) 立即执行函数表达式
const listItems = document.querySelectorAll('li');
for (var i = 0; i < listItems.length; i++) {
(function(index) { // 使用 IIFE 创建一个新的作用域
listItems[index].addEventListener('click', function() {
console.log('You clicked item #' + index);
});
})(i); // 将 i 的值作为参数传递给 IIFE
}在这个方法中，我们使用 IIFE 创建了一个新的作用域，并将 i 的值作为参数传递给 IIFE。这样，每个事件处理函数都拥有了自己的 index 变量，它的值就是事件发生时的 i 的值。
方法二：使用 let 声明变量
const listItems = document.querySelectorAll('li');
for (let i = 0; i < listItems.length; i++) { // 使用 let 声明变量
listItems[i].addEventListener('click', function() {
console.log('You clicked item #' + i);
});
}这个方法更加简洁明了。let 声明的变量具有块级作用域，这意味着每次循环迭代都会创建一个新的 i 变量。每个事件处理函数都可以访问到它被创建时的 i 变量的值。
这两种方法本质上都是利用了闭包的特性，创建了一个新的作用域，将事件发生时的变量值保存下来。
表格总结：两种方法的对比
| 方法 | 优点 | 缺点 |
|---|---|---|
| IIFE | 兼容性好，适用于旧版本浏览器 | 代码略显冗余，可读性稍差 |
let 声明变量 |
代码简洁明了，可读性好 | 兼容性略差，不支持旧版本浏览器（IE10以下） |
第三幕：上下文保存的艺术
闭包不仅可以保存变量的值，还可以保存整个上下文。上下文，指的是函数执行时的环境，包括 this 的指向、变量的值等等。
在事件处理函数中，this 的指向通常是触发事件的元素。但是，有时我们需要在事件处理函数中访问其他对象的属性或方法。这时，就需要使用闭包来保存上下文。
举个例子：
const myObject = {
name: "My Object",
handleClick: function() {
const self = this; // 保存 this 的引用
document.getElementById('myButton').addEventListener('click', function() {
console.log("Clicked by: " + self.name); // 访问 myObject 的 name 属性
});
}
};
myObject.handleClick();在这个例子中，handleClick 函数中的 this 指向 myObject。但是，在事件处理函数中，this 指向的是按钮元素。为了在事件处理函数中访问 myObject 的 name 属性，我们首先将 this 的引用保存到 self 变量中，然后在事件处理函数中使用 self 来访问 myObject 的属性。
如果没有闭包，我们就无法在事件处理函数中访问到 myObject 的 name 属性。
另一种更优雅的方式：使用 bind 方法
const myObject = {
name: "My Object",
handleClick: function() {
document.getElementById('myButton').addEventListener('click', function() {
console.log("Clicked by: " + this.name); // 访问 myObject 的 name 属性
}.bind(this)); // 使用 bind 方法绑定 this
}
};
myObject.handleClick();bind 方法可以创建一个新的函数，并将 this 绑定到指定的对象。在这个例子中，我们使用 bind(this) 将事件处理函数中的 this 绑定到 myObject，从而可以在事件处理函数中直接访问 myObject 的 name 属性。
第四幕：闭包的优缺点，理性看待
任何事物都有两面性，闭包也不例外。
优点：
- 数据封装： 闭包可以创建私有变量，防止外部代码直接访问和修改内部数据，提高代码的安全性。
- 状态保持： 闭包可以记住函数执行时的状态，方便实现一些复杂的功能，比如计数器、累加器等等。
- 模块化： 闭包可以用来创建模块，将代码组织成独立的单元，提高代码的可维护性和可复用性。
缺点：
- 内存泄漏： 如果闭包引用了大量的外部变量，而这些变量又没有被及时释放，可能会导致内存泄漏。
- 性能损耗： 闭包的创建和访问需要额外的开销，可能会影响代码的性能。
因此，在使用闭包时，需要权衡利弊，避免滥用，确保代码的性能和可维护性。
第五幕：闭包的常见应用场景，举一反三
除了事件处理函数，闭包还有很多其他的应用场景。
- 函数柯里化 (Currying)： 将一个接受多个参数的函数转换成一系列接受单个参数的函数。
- 防抖 (Debouncing) 和节流 (Throttling)： 控制函数的执行频率，避免频繁触发事件。
- 迭代器 (Iterator)： 提供一种访问集合元素的方式，而不需要暴露集合的内部结构。
- 模块模式 (Module Pattern)： 创建私有变量和公共接口，实现代码的模块化。
第六幕：闭包的注意事项，避坑指南
- 避免循环引用： 闭包不要引用自身，否则会导致内存泄漏。
- 及时释放资源： 如果闭包引用了大量的外部变量，确保在不再需要时及时释放这些变量。
- 谨慎使用全局变量： 尽量避免在闭包中使用全局变量，否则可能会导致意外的副作用。
总结：
闭包是一种强大的工具，可以帮助我们解决很多复杂的问题。但是，在使用闭包时，需要深入理解其原理，权衡利弊，避免滥用，确保代码的性能和可维护性。
希望今天的“闭包奇妙夜”能让你对闭包有更深入的理解。记住，闭包就像一位忠实的管家，只要你善待它，它就会为你提供周到的服务。
感谢大家的观看！我们下期再见！👋