闭包可以用来保持对外部函数作用域的引用。
目录
1. 什么是闭包
闭包（Closure）是 JavaScript 中一个非常强大的特性，它是由函数及其词法作用域（函数外部的变量）共同组成的。闭包允许一个函数访问并操作外部函数的变量，即使外部函数已经执行完毕。
简单来说，闭包就是一个能够访问外部函数作用域变量的函数。
示例：
function outer() {
let outerVar = 'I am outside!';
function inner() {
console.log(outerVar); // 访问外部函数的变量
}
return inner;
}
const closureExample = outer();
closureExample(); // 输出：I am outside!
在上面的代码中，inner 函数是一个闭包，它能够访问并打印 outerVar 变量，尽管 outer 函数已经执行完毕并返回了 inner 函数。此时 inner 函数的作用域链仍然保留了对 outerVar 变量的引用。
2. 闭包的作用
闭包可以在很多编程场景中提供便利，常见的作用有：
2.1 保持状态
闭包可以在多个函数调用之间保持状态。通过使用闭包，你可以创建具有私有状态的函数，避免全局污染，并且能够创建可维护、可复用的代码。
function counter() {
let count = 0;
return function() {
count++;
return count;
};
}
const myCounter = counter();
console.log(myCounter()); // 输出：1
console.log(myCounter()); // 输出：2
console.log(myCounter()); // 输出：3
这里的 counter 函数返回一个闭包，这个闭包保留了对 count 变量的引用，每次调用时会更新 count，并且返回新的值。
2.2 模块化
通过闭包，你可以模拟私有变量的作用域，避免污染全局命名空间，创建模块化代码。
const counterModule = (function() {
let count = 0; // 私有变量
return {
increment: function() {
count++;
console.log(count);
},
decrement: function() {
count--;
console.log(count);
}
};
})();
counterModule.increment(); // 输出：1
counterModule.increment(); // 输出：2
counterModule.decrement(); // 输出：1
这里 counterModule 是一个自执行匿名函数，它返回一个对象，这个对象的方法可以访问到私有变量 count，而外部无法直接访问或修改 count。
3. 闭包的工作原理
闭包的工作原理基于 词法作用域，即函数的作用域是在编写函数时确定的，而不是在执行时确定的。
词法作用域
词法作用域意味着一个函数的作用域是由它定义的位置决定的，而不是由它被调用的位置决定的。在 JavaScript 中，当一个函数被定义时，它的作用域就被创建了，并且该函数会记住它的外部作用域。
例子：
function outer() {
let outerVar = 'I am outside!';
function inner() {
console.log(outerVar);
}
return inner;
}
const closureExample = outer(); // 返回 inner 函数
closureExample(); // 输出：I am outside!
在这个例子中，inner 函数形成了一个闭包，它不仅访问了 outer 中定义的 outerVar 变量，还记住了它的定义位置（即 outer 的作用域）。
4. 闭包的常见应用场景
4.1 事件处理器
在事件处理函数中，闭包常用于保存事件的状态或参数，使得事件处理函数在回调执行时能够访问到相应的数据。
function createClickHandler(message) {
return function() {
console.log(message);
};
}
const button = document.querySelector('button');
const clickHandler = createClickHandler('Button clicked!');
button.addEventListener('click', clickHandler);
在这个例子中，clickHandler 是一个闭包，它保存了 message 变量的状态，使得在事件触发时能够访问并打印该变量。
4.2 延迟执行
闭包可以用来延迟某些操作的执行，尤其是在需要延迟执行并且保留某些状态的情况下。
function delayGreeting(name) {
return function() {
console.log(`Hello, ${name}!`);
};
}
const greet = delayGreeting('Alice');
setTimeout(greet, 2000); // 延迟2秒后输出：Hello, Alice!
这里，delayGreeting 函数创建了一个闭包，它保存了 name 参数，并且 greet 函数会在延迟之后执行。
5. 闭包的优势与劣势
5.1 优势
- 封装与私有变量：闭包使得可以在函数外部无法访问的情况下保留和操作函数内部的状态。
- 模块化：闭包可以帮助我们创建模块化的代码，通过将变量封装在闭包中，避免了全局污染。
- 灵活的异步编程：闭包对于异步操作（如
setTimeout、事件监听等）非常有用，因为它能够在异步操作结束时依然访问外部函数的状态。
5.2 劣势
- 内存泄漏：闭包会保持对外部作用域的引用，如果闭包的引用过多，可能导致内存泄漏，特别是在不再需要闭包时未能清理它们。
- 性能问题：闭包可能会影响性能，因为每个闭包都可能包含一份外部作用域的引用，这会增加内存的使用。
6. 避免闭包常见问题
6.1 解决闭包中的内存泄漏
如果你在使用闭包时不再需要某些数据，确保及时销毁闭包对这些数据的引用，避免内存泄漏。例如，在事件监听器中移除不再使用的回调函数。
const button = document.querySelector('button');
function handleClick() {
console.log('Button clicked!');
}
button.addEventListener('click', handleClick);
// 如果不再需要，可以移除事件监听器
button.removeEventListener('click', handleClick);
6.2 解决循环中的闭包问题
在 for 循环中创建闭包时，确保每个闭包能正确访问到循环变量的当前值，通常使用 let 来代替 var，因为 let 具有块级作用域，而 var 具有函数作用域。
for (let i = 0; i < 5; i++) {
setTimeout(function() {
console.log(i); // 输出：0, 1, 2, 3, 4
}, 1000);
}
