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'的未定义”，因为脚本似乎是字面上使用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来使示例更加清晰）。

Answer 2

你可以尝试使用this吗？

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

Answer 3

statesPoly [i]未定义，因为您的变量i未在附加到事件侦听器的新函数内定义。

你可以在这里做几件事，但最简单的方法是将这个变量传递给函数。 像这样的东西：

google.maps.event.addListener(statesPoly[i], 'mouseover', function(i) {
  statesPoly[i].setOptions({ strokeWeight: '2' });
});