如何在 JavaScript 闭环循环中访问外部变量？

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

在 JavaScript 中，当使用 for 循环迭代数组时，很常见循环内变量的值始终与上次迭代相同的问题。这是由于可变作用域和闭包造成的。

为了解决这个问题，可以采用一种称为闭包的技术。闭包是一个返回函数的函数，它捕获父函数的变量范围。

考虑以下示例：

<code class="javascript">for (var i in this.items) {
    var item = this.items[i];
    $("#showcasenav").append("<li id=\"showcasebutton_" + item.id + "\"><img src=\"/images/showcase/icon-" + item.id + ".png\" /></li>");
    $("#showcasebutton_" + item.id).click(function() {
        alert(item.id);
        self.switchto(item.id);
    });
}</code>

在这段代码中，变量项随着每次变化而变化。循环的迭代。当调用点击处理程序时，它使用 item 的最后一个值。

为了解决这个问题，我们可以使用闭包来捕获循环变量的范围：

<code class="javascript">for (var i in this.items) {
    var item = this.items[i];
    $("#showcasenav").append("<li id=\"showcasebutton_" + item.id + "\"><img src=\"/images/showcase/icon-" + item.id + ".png\" /></li>");
    $("#showcasebutton_" + item.id).click(
        // create an anonymous function that will scope "item"
        (function(item) {
            // that returns our function
            return function() {
                alert(item.id);
                self.switchto(item.id);
            };
        })(item) // immediately call it with "item"
    );
}</code>

这里，我们将点击处理函数包装在另一个函数中，该函数在循环迭代期间捕获 item 的范围。当调用单击处理程序时，它会使用正确的 item 值。

另一种方法是使用 jQuery 的 $.each() 函数，该函数会自动获取循环变量，从而无需闭包：

<code class="javascript">$.each(this.items, function(i, item) {
    $("#showcasenav").append("<li id=\"showcasebutton_" + item.id + "\"><img src=\"/images/showcase/icon-" + item.id + ".png\" /></li>");
    $("#showcasebutton_" + item.id).click(function() {
        alert(item.id);
        self.switchto(item.id);
    });
});</code>

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