Javascript数组不使用for循环变量

Question

我有一个数组，其中填充了与我创建的 Google map 多边形对象同名的字符串。我想遍历数组以设置特定选项。这是代码:

for (var i = 0; i < statesPoly.length; i++) {
    google.maps.event.addListener(statesPoly[i], 'mouseover', function() {
        statesPoly[i].setOptions({ strokeWeight: '2' });
    });
}

当执行时，我得到“无法调用未定义的方法‘setOptions’”，因为脚本似乎在字面上使用 statesPoly[i]。例如，当我将 statesPoly[i] 替换为 statesPoly[11] 时，脚本会按预期工作。

当我尝试这样的事情时，循环也按预期工作:

for (var i = 0; i < statesPoly.length; i++) {
    alert(statesPoly[i].strokeColor);
}

我做错了什么？

更新:

离这里越来越近了。我相信在某些情况下使用 this 的原因是因为我的函数需要一个对象并且我给它一个字符串。会是这样吗？

alert(statesPoly[0]);
        google.maps.event.addListener(sarawakPoly, 'mouseover', function() {
            $("#"+statesPoly[0]).addClass("highlight");
            sarawakPoly.setOptions({ strokeWeight: '2' });
            //infowindow.open(map,marker);
        });

上面的代码将使用 SarawakPoly 发出警报，并且使用 statesPoly[0] 作为 ID 中的字符串会按预期工作。这个

 alert(statesPoly[0]);
        google.maps.event.addListener(statesPoly[0], 'mouseover', function() {
            $("#"+statesPoly[0]).addClass("highlight");
            statesPoly[0].setOptions({ strokeWeight: '2' });
            //infowindow.open(map,marker);
        });

不起作用，因为“未捕获的类型错误:无法读取未定义的属性‘鼠标悬停’”

如果我是对的，如何让我的 JS 将我的数组变量转换为对象？

Answer 1

这是 JavaScript 代码中一个非常常见的错误:

for (var i = 0; i < n; i++) {
    registerSomeCallback(function () {
        console.log(i);
    });
}

在每次循环迭代中，变量 i 都会递增，因为 JavaScript 的 lexical scoping在每次迭代中定义的函数共享相同的 i 变量。这意味着当调用回调时(在您的情况下发生 Google map 事件时)，i 将始终是循环达到的最后一个值。

就好像你在这样做:

var i, fn;

i = 0;
fn = function () { alert(i); };
fn(); // will alert "0"
i = 1;
fn(); // i has changed, will now alert "1"
i = 2;
fn(); // i has changed again, will now alert "2"

您需要确保循环的每次迭代都有一个新的变量范围，例如:

for (var i = 0; i < n; i++) {
    (function (n) {
        registerSomeCallback(function () {
            console.log(n);
        });
    }(i));
}

在此版本的代码中，每个回调都在其自己的变量范围内定义，并带有自己的计数器变量(您仍然可以将其称为 i，但我已将其称为 n 使示例更清晰)。