Javascript数组不使用for循环变量

Question

我有一个数组填充了与我创建的Google Maps Polygon Objects同名的字符串.我想迭代数组来设置一个特定的选项.这是代码:

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

执行时,我得到"无法调用方法'setOptions'的undefined",因为脚本似乎是字面上使用statesPoly [i].当我用statesPoly [11]替换statesPoly [i]时,脚本按预期工作.

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

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);
        });

不起作用,因为"Uncaught TypeError:无法读取未定义的属性'mouseover'"

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

Answer 1

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

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

在每次循环迭代中,变量i都会递增,因为JavaScript的词法作用域,每次迭代定义的函数共享同一个i变量.这意味着当调用回调时(在您发生Google Maps事件的情况下),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以使示例更加清晰).