聊一聊JavaScript 中的神奇特性：闭包的秘密

你是否曾经听说过 JavaScript 中的闭包，但感觉一头雾水？

今天，我们将揭开这个神秘面纱，一起来探索 JavaScript 中闭包的奇妙世界~

1. 什么是闭包

闭包是 JavaScript 中一个强大而神奇的特性。简单来说，闭包是一个函数，它记住了在创建时所处的作用域。

这就如同一个魔法盒子，可以保留着一些特殊的能力。

2. 如何创建闭包

闭包的创建并不复杂，它通常发生在一个函数内部定义了另一个函数。内部函数通过引用外部函数的变量，形成了闭包。

function createCounter() {
    let count = 0;

    return function() {
        count++;
        console.log(count);
    };
}

const counter = createCounter();
counter(); // 输出：1
counter(); // 输出：2

3. 实际应用场景举例

• 事件处理

在事件处理程序中使用闭包，可以保留事件发生时的上下文信息。例如，一个点击按钮后显示相应序号的例子：

<button id="btn1">按钮1</button>
<button id="btn2">按钮2</button>
<script>
for (var i = 1; i <= 2; i++) {
    document.getElementById('btn' + i).addEventListener('click', (function(index) {
    return function() {
        console.log('按钮' + index + '被点击了！');
        };
    })(i));
}
</script>

• 计数器

通过闭包实现私有计数器，可以避免全局变量的污染。

以下是一个简单的计数器的例子：

function createCounter() {
    let count = 0;
    return function() {
        count++;
        console.log(count);
    };
}
const counterA = createCounter();
counterA(); // 输出：1
counterA(); // 输出：2
const counterB = createCounter();
counterB(); // 输出：1

每次调用 createCounter() 时，都会创建一个新的闭包，拥有独立的 count 变量。

4. 注意事项

尽管闭包很强大，但也需要注意一些事项：

• 内存管理：过度使用闭包可能导致内存泄漏，需要谨慎使用。

• 避免滥用：不是所有场景都需要闭包，了解何时使用是很重要的。

5. 结语

文章中例举了 2 个利用闭包解决实际编程问题的场景，随着编程能力越来越高，你会发现更多的闭包使用场景。

希望本文可以帮助你理解闭包这个概念~