各位观众老爷们，大家好！今天咱们来聊聊JS里的一个让人又爱又恨的小妖精——闭包（Closure）。这玩意儿用好了是神器，用不好，嘿，内存泄漏分分钟教你做人！
咱们先来唠唠闭包是个啥，再细说它怎么偷你内存，最后再拿出几把屠龙刀，教你如何降妖伏魔，让闭包乖乖听话。
一、闭包是个啥玩意儿？（What is Closure?）
说白了，闭包就是函数和其周围状态（词法环境）的捆绑组合。这个词法环境包含了函数声明时所能访问的所有局部变量。 更通俗点说，就是函数记住了它出生时的环境，即使这个环境已经消失了，它仍然能访问到。
举个栗子：
function outerFunction() {
let outerVar = "Hello";
function innerFunction() {
console.log(outerVar);
}
return innerFunction;
}
let myClosure = outerFunction(); // myClosure 现在就是一个闭包
myClosure(); // 输出 "Hello"在这个例子里，innerFunction 就是一个闭包。它定义在 outerFunction 内部，并且访问了 outerFunction 的局部变量 outerVar。当 outerFunction 执行完毕后，outerVar 理应被销毁，但由于 innerFunction 引用了它，outerVar 仍然存活在内存中，这就是闭包的神奇之处。
闭包的特点：
- 函数嵌套函数： 闭包通常产生于函数内部嵌套函数的情况。
- 内部函数引用外部函数的变量： 这是形成闭包的关键，内部函数需要访问外部函数的词法环境。
- 外部函数返回内部函数： 这样才能将闭包传递到外部作用域，供其他地方使用。
- 延长变量的生命周期： 即使外部函数执行完毕，被引用的变量仍然存在于内存中。
二、闭包为啥会搞事情？（Why Closure Can Cause Memory Leaks?）
闭包本身并不是内存泄漏的罪魁祸首，而是不恰当的使用闭包，导致本该释放的内存无法释放，最终造成内存泄漏。
想象一下，你租了个房子，退租后，房东应该把房子打扫干净，重新出租。但是，如果你的东西（变量）还留在里面，房东就不能轻易处理这个房子，因为里面有你的东西。闭包就像这个“东西”，它让垃圾回收器（GC）无法回收被它引用的变量。
常见场景：
-
循环中的闭包： 这是最常见的内存泄漏场景之一。
function createFunctions(num) { let functions = []; for (var i = 0; i < num; i++) { // 注意这里用的是 var functions[i] = function() { console.log(i); }; } return functions; } let functionList = createFunctions(5); functionList[0](); // 输出 5 functionList[1](); // 输出 5 functionList[2](); // 输出 5问题分析： 因为
var声明的i是函数作用域的，所以循环结束后，所有的闭包都引用了同一个i，其值为 5。 更严重的是，即使createFunctions执行完毕，i仍然存在于createFunctions的活动对象中，无法被回收。解决方案：
-
使用
let或const：let和const声明的变量是块级作用域的，每次循环都会创建一个新的i。function createFunctions(num) { let functions = []; for (let i = 0; i < num; i++) { // 使用 let functions[i] = function() { console.log(i); }; } return functions; } let functionList = createFunctions(5); functionList[0](); // 输出 0 functionList[1](); // 输出 1 functionList[2](); // 输出 2 -
使用立即执行函数（IIFE）： IIFE 可以创建一个新的作用域，将每次循环的
i的值保存在这个作用域中。function createFunctions(num) { let functions = []; for (var i = 0; i < num; i++) { // 使用 var functions[i] = (function(j) { // IIFE return function() { console.log(j); }; })(i); } return functions; } let functionList = createFunctions(5); functionList[0](); // 输出 0 functionList[1](); // 输出 1 functionList[2](); // 输出 2
-
-
大型对象和 DOM 元素的引用： 闭包如果引用了大型对象（例如包含大量数据的数组或对象）或者 DOM 元素，并且长期不释放，会导致内存占用过高。
function createClosure() { let largeArray = new Array(1000000).fill(0); // 大型数组 let element = document.getElementById('myElement'); // DOM 元素 let myFunc = function() { console.log(largeArray.length); console.log(element.id); }; return myFunc; } let myClosure = createClosure(); // 假设之后不再需要 largeArray 和 element，但是 myClosure 仍然存在 // 那么 largeArray 和 element 就无法被垃圾回收器回收，造成内存泄漏解决方案：
-
手动释放引用： 在不再需要闭包时，将其设置为
null，并手动解除对大型对象和 DOM 元素的引用。function createClosure() { let largeArray = new Array(1000000).fill(0); // 大型数组 let element = document.getElementById('myElement'); // DOM 元素 let myFunc = function() { console.log(largeArray.length); console.log(element.id); }; return myFunc; } let myClosure = createClosure(); // 假设之后不再需要 largeArray 和 element myClosure = null; // 释放闭包 largeArray = null; // 解除对大型数组的引用 element = null; // 解除对 DOM 元素的引用 -
使用 WeakMap 和 WeakSet：
WeakMap和WeakSet是一种弱引用，它们不会阻止垃圾回收器回收被引用的对象。 当对象不再被其他地方引用时，WeakMap和WeakSet中对该对象的引用也会自动消失。let myElement = document.getElementById('myElement'); let weakMap = new WeakMap(); weakMap.set(myElement, { data: 'some data' }); // 当 myElement 从 DOM 中移除或者不再被其他地方引用时， // weakMap 中对 myElement 的引用也会自动消失，避免内存泄漏。
-
-
事件监听器中的闭包： 如果事件监听器中使用了闭包，并且在不再需要监听器时没有移除，会导致内存泄漏。
function setupButton() { let button = document.getElementById('myButton'); let count = 0; button.addEventListener('click', function() { count++; console.log('Button clicked ' + count + ' times'); }); } setupButton(); // 如果之后不再需要这个按钮，但是事件监听器没有移除， // 那么 count 变量会一直存在于内存中，造成内存泄漏。解决方案：
-
移除事件监听器： 在不再需要监听器时，使用
removeEventListener移除它。function setupButton() { let button = document.getElementById('myButton'); let count = 0; let clickHandler = function() { count++; console.log('Button clicked ' + count + ' times'); }; button.addEventListener('click', clickHandler); // 假设之后不再需要这个按钮 button.removeEventListener('click', clickHandler); // 移除事件监听器 } setupButton();
-
三、屠龙之术：如何避免闭包引起的内存泄漏？（Solutions to Prevent Memory Leaks）
| 问题场景 | 解决方案 | 代码示例 |
|---|---|---|
| 循环中的闭包 | 使用 let 或 const 声明循环变量，或者使用 IIFE 创建新的作用域。 |
使用 let/const： |
for (let i = 0; i < num; i++) { ... }
```
*使用 IIFE：*
```javascript
for (var i = 0; i < num; i++) {
(function(j) {
functions[i] = function() { console.log(j); };
})(i);
}
``` |
| 大型对象和 DOM 元素的引用 | 手动释放引用，将闭包设置为 `null`，并解除对大型对象和 DOM 元素的引用。或者使用 `WeakMap` 和 `WeakSet` 进行弱引用。 | *手动释放引用：*
```javascript
myClosure = null;
largeArray = null;
element = null;
```
*使用 WeakMap：*
```javascript
let weakMap = new WeakMap();
weakMap.set(myElement, { data: 'some data' });
``` |
| 事件监听器中的闭包 | 在不再需要监听器时，使用 `removeEventListener` 移除它。 | ```javascript
button.removeEventListener('click', clickHandler);
``` |
| 全局变量污染 | 尽量避免使用全局变量。如果必须使用，确保在使用完毕后及时清理。可以使用立即执行函数（IIFE）创建模块作用域，避免变量污染全局作用域。 | ```javascript
(function() {
let myVariable = 'some value'; // 模块内部变量
// ...
myVariable = null; // 模块退出时清理
})();
``` |
| 定时器中的闭包 | 使用 `clearInterval` 和 `clearTimeout` 清除定时器。 | ```javascript
let intervalId = setInterval(function() { ... }, 1000);
clearInterval(intervalId);
``` |
**总结：**
闭包是 JS 里一个强大而灵活的特性，但也是一个潜在的雷区。要避免闭包引起的内存泄漏，关键在于：
* **理解闭包的本质：** 知道闭包是如何工作的，以及它如何影响变量的生命周期。
* **小心使用闭包：** 只在必要的时候使用闭包，避免过度使用。
* **及时清理引用：** 在不再需要闭包时，手动释放引用，解除对大型对象和 DOM 元素的引用。
* **善用工具：** 使用 `let`、`const`、`WeakMap`、`WeakSet` 等工具，帮助你更好地管理内存。
* **代码审查和测试：** 定期进行代码审查，并进行内存泄漏测试，及时发现和解决问题。
记住，内存泄漏就像慢性病，早期可能不易察觉，但长期积累下来会严重影响程序的性能。 所以，一定要养成良好的编码习惯，防微杜渐，才能让你的代码健康长寿！
好了，今天的讲座就到这里，希望能对大家有所帮助。 下次有机会再和大家聊聊其他的JS小技巧！ 谢谢大家！