for循环内的Javascript变量范围答案

【问题标题】：Javascript variable scope inside for loopfor循环内的Javascript变量范围
【发布时间】：2012-06-12 19:41:18
【问题描述】：

如何在下面的 for 循环中保持对 i 变量的访问？我正在努力学习，而不仅仅是得到答案，所以一些解释会非常有帮助。谢谢！

var el, 
    len = statesPolyStrings.length;

for (var i = 0; i < len; i++) {
    el = document.getElementById(statesPolyStrings[i]);

    google.maps.event.addDomListener(el, 'mouseover', function() {
        $("#"+statesPolyStrings[i]).addClass("highlight");
        statesPolyObjects[i].setOptions({ strokeWeight: '2' });
    });
}

【问题讨论】：

您想在 for 循环之外访问i？您已经可以在 for 循环中访问 i。
我想在 for 循环中的 addDomListener 函数中访问它。在上面代码中任何你看到 i 的地方，我都想使用在 for 循环中定义和递增的 i。
Javascript closure inside loops - simple practical example 的可能重复项

标签： javascript

【解决方案1】：

所有回调共享同一个 i 变量。
当事件处理程序实际运行时，i 在数组末尾之后。

您需要将循环体包装在以i 作为参数的自调用函数中。
这样，每次迭代都会获得自己的、不变的i 变量。

例如：

for (var i = 0; i < statesPolyStrings.length; i++) {
    (function(i) {
        ...
    })(i);
}

【讨论】：

你能通过更正我的代码来提供一个例子吗？我不确定你的意思。
明白了，现在明白了。谢谢。

【解决方案2】：

for (var i = 0; i < statesPolyStrings.length; i++) {
    (function(i){
        google.maps.event.addDomListener(document.getElementById(statesPolyStrings[i]), 'mouseover', function() {
        $("#"+statesPolyStrings[i]).addClass("highlight");
        statesPolyObjects[i].setOptions({ strokeWeight: '2' });
        });
    })(i)
}

【讨论】：

【解决方案3】：

自调用函数的技巧很有效：它创建了一个新范围（可能是 google 的“函数 javascript 中的范围”），因此将 i 作为不同的变量处理，并为您的事件侦听器回调函数提供正确的值.

但是您实际上不需要使用 jQuery再次找到您的元素，因为您已经为它分配了一个事件侦听器，并且在您的函数内部您可以使用 @987654324 引用您的元素@。

无论如何，当您使用 jQuery 时，很容易找到 statesPolyObjects 的正确索引（您的 i），其中 $.inArray() 传递您的元素的 id 和 statesPolyStrings 数组（假设您'重新处理唯一 ID。否则，$("#"+statesPolyStrings[i]) 也会失败，因为它会先找到）。

var el;

for (var i = 0, len = statesPolyStrings.length; i < len; i++) {
    el = document.getElementById(statesPolyStrings[i]);

    google.maps.event.addDomListener(el, 'mouseover', function(event) {
        $(this).addClass("highlight");
        statesPolyObjects[$.inArray(this.id, statesPolyStrings)].
            setOptions({ strokeWeight: '2' });
    });
}

如果您仍然想坚持使用自调用功能，您无论如何都应该更改以下行：

("#"+statesPolyStrings[i]).addClass("highlight");

到

$(this).addClass("highlight");

如果您对 this 和事件不够熟悉，您可能想阅读这篇文章： http://www.sitepoint.com/javascript-this-event-handlers/

您可能已经注意到，我还在匿名回调函数中编写了参数 event。尝试console.log 使用任何事件侦听器回调函数免费提供此事件，并探索您可以访问的所有其他内容。例如，您可以使用event.target 找到您单击的实际元素（因为实际的鼠标悬停可能发生在您元素的子元素上）。所以：

google.maps.event.addDomListener(el, 'mouseover', function(event) {
    console.log(event);
    ...

并打开浏览器的控制台以查看发送的事件...

请注意，google.maps.event.addDomListener 传递的内容与 document.body.addEventListener 不同，并且浏览器之间也存在差异。例如，jQuery.on() 在事件对象中也提供了一些不同的东西，但你至少可以在所有浏览器中依赖相同的数据。

【讨论】：