如何使用 JavaScript 闭包和 jQuery 在循环中正确访问外部变量？

通过 JavaScript 闭包访问循环中的外部变量

在 JavaScript 中，在闭包和循环中操作变量可能会带来挑战。本文解决了一个常见问题，即在循环中访问变量会因变量作用域而导致意外值。

考虑以下代码片段：

<code class="javascript">for (var i in this.items) {
    var item = this.items[i];
    // ...
    $("#showcasebutton_" + item.id).click(function() {
        alert(item.id);
        self.switchto(item.id);
    });
}</code>

单击由在循环中，警报函数始终显示数组中最后一项的 ID。发生这种情况是因为变量 item 随着每次迭代而变化，并且当点击事件被触发时，它引用了最后一个元素。

为了解决这个问题，我们可以使用闭包。闭包是返回其他函数的函数，通常用于创建变量的本地化作用域。通过修改代码，我们可以将变量 item 封装在闭包中：

<code class="javascript">for (var i in this.items) {
    var item = this.items[i];
    // ...
    $("#showcasebutton_" + item.id).click(
        (function(item) {
             return function() {
                alert(item.id);
                self.switchto(item.id);
             };
        })(item)
    );
}</code>

在内部函数中，变量 item 被捕获为参数，从而有效地创建了本地化范围。这确保了当点击事件被触发时，它将访问与该按钮关联的正确的项目对象。

或者，您可以利用 jQuery 的 $.each() 辅助函数，这简化了迭代和变量作用域过程:

<code class="javascript">$.each(this.items,function(i, item) {
    // ...
    $("#showcasebutton_" + item.id).click(function() {
        alert(item.id);
        self.switchto(item.id);
    });
});</code>

在这种情况下，item 作为参数传递给函数，确保适当的范围并解决初始问题。

以上是如何使用 JavaScript 闭包和 jQuery 在循环中正确访问外部变量？的详细内容。更多信息请关注PHP中文网其他相关文章！