JavaScript 中的闭包是一种重要的编程概念，它允许我们在函数内部创建一个封闭的作用域，并将其保存在函数外部的变量中。然而，闭包也可能导致一些问题，其中之一就是可变变量可以从闭包中访问。这篇文章将介绍这个问题以及如何解决它。
问题
首先，什么是可变变量？在 JavaScript 中，如果一个变量是对象或数组，那么它是可变的，因为它的值可以被修改。比如：
let obj = { a: 1 };
obj.a = 2;在 JavaScript 中，闭包可以访问其父级作用域中的变量。如果这个变量是可变的，那么闭包可以通过修改这个变量来影响其父级作用域。例如：
-- -------------------- ---- -------
-------- --------------- -
--- ----- - --
------ -------- -- -
--------
-------------------
--
-
----- --------- - ----------------
------------ -- -- -
------------ -- -- -在上面的代码中，createCounter 函数返回一个新的函数，该函数每次被调用都会增加 count 的值并将其打印到控制台上。变量 count 在 createCounter 函数内部定义，但是它可以被返回的函数访问和修改，因为它们在同一个闭包中。
这个例子看起来很不错，但是如果我们在创建多个计数器时就会出现问题：
const counter1 = createCounter(); const counter2 = createCounter(); counter1(); // 输出 1 counter2(); // 输出 1 counter1(); // 输出 2 counter2(); // 输出 2
我们期望每个计数器都有自己的计数，但是由于所有的计数器都共享了 count 变量，所以它们的计数值会相互干扰。这个问题是因为变量 count 是可变的，并且被多个闭包引用所导致的。
解决方案
解决这个问题的关键是要确保每个计数器都有自己的 count 值。我们可以使用一个立即执行函数（IIFE）来创建一个新的作用域，并在其中定义一个局部变量来保存 count 的值，如下所示：
-- -------------------- ---- -------
-------- --------------- -
------ --------- -- -
--- ----- - --
------ -------- -- -
--------
-------------------
--
-----
-
----- -------- - ----------------
----- -------- - ----------------
----------- -- -- -
----------- -- -- -
----------- -- -- -
----------- -- -- -在上面的代码中，我们将 createCounter 函数改为返回一个立即执行函数。在这个立即执行函数中，我们定义了一个局部变量 count 来保存计数值，并返回一个新的函数来访问和修改该变量。每次调用 createCounter 函数都会创建一个新的闭包，它们之间是相互独立的。
总结
本文介绍了 JavaScript 中闭包访问可变变量可能导致的问题，并提供了一种解决方案，即使用立即执行函数来创建一个新的作用域。当我们需要多个相似但相互独立的闭包时，这种技巧非常有用。
尽管闭包是 JavaScript 中强大的工具之一，但是在使用时需要小心，特别是当涉及到可变变量时。通过理解闭包是如何工作的以及如何避免常见问题，我们
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/13158