循环中的闭包如何处理变量共享并保持唯一性？

揭穿循环中闭包的误解

在编程领域，闭包因其能够在范围内维护对变量的引用而引起了极大的关注一个循环。然而，理解这个概念可能会令人畏惧。让我们使用简化的代码示例进行详细解释，让您有一个全面的理解。

考虑以下代码片段：

<code class="javascript">function addLinks() {
    for (var i = 0, link; i < 5; i++) {

        link = document.createElement("a");
        link.innerHTML = "Link " + i;


        link.onclick = function (num) {
            return function () {
                alert(num);
            };
        }(i);
        document.body.appendChild(link);

    }
}
window.onload = addLinks;</code>

出现的问题是如何压缩这段代码同时保留了闭包的本质。为了解决这个问题，我们将采用“函数工厂”方法。

<code class="javascript">for (var i = 0; i < 10; i++) {
    document.getElementById(i).onclick = (function (x) {
        return function () {
            alert(x);
        }
    })(i);
}</code>

或者，为了提高可读性：

<code class="javascript">function generateMyHandler(x) {
    return function () {
        alert(x);
    }
}

for (var i = 0; i < 10; i++) {
    document.getElementById(i).onclick = generateMyHandler(i);
}</code>

揭示闭包的作用：

需要理解的一个重要方面是闭包的独特性质。它们不仅捕获变量的值，还包含变量本身。为了说明这一点，请考虑以下代码：

<code class="javascript">var message = 'Hello!';
document.getElementById('foo').onclick = function () { alert(message) };
message = 'Goodbye!';</code>

单击元素“foo”将触发一个警报框，显示消息：“再见！”。这是因为闭包保留变量，而不仅仅是它的值。

在循环的上下文中，使用简单的闭包会导致变量共享。以下代码演示了这一点：

<code class="javascript">for (var i = 0; i < 10; i++) {
    document.getElementById('something' + i).onclick = function () { alert(i) };
}</code>

单击任何元素时，都会提示数字 10 的警报，因为所有函数共享相同的变量。甚至修改 i，如 i = "hello"; 所示将导致所有元素显示相同的警报：“hello”。这是由于对变量的共享引用造成的。

函数参数的力量：

为了减轻这种变量共享，我们利用 JavaScript 中函数参数的功能。调用函数时，参数通过引用（对于对象）或值（对于字符串和数字）传递。这使我们能够打破闭包内变量的共享。

在修改后的代码片段中：

<code class="javascript">for (var i = 0; i < 10; i++) {
    document.getElementById(i).onclick =
        (function (x) {
            return function () {
                alert(x);
            }
        })(i)
}</code>

我们引入了一个工厂函数来生成所需的函数引用。此引用捕获传递给函数的参数（在本例中为 i 的值）并将其维护在闭包内，确保每个元素保留其唯一值。

以上是循环中的闭包如何处理变量共享并保持唯一性？的详细内容。更多信息请关注PHP中文网其他相关文章！