Javascript计数器未传递到谷歌地图函数中

Question

我确信这与作用域有关，但我似乎总是在处理javascript作用域。

无论如何，这是代码。。。

var beaches = [
      ['Surf Spot One', xxxxxx, xxxxxx, 2],
      ['Surf Spot Two', xxxxxx, xxxxxx, 1],
      ['Surf Spot Three', xxxxxx, xxxxxx, 3 ]
    ];
    var marker = [];
    for (var i = 0; i < beaches.length; i++) {
      var pos = new google.maps.LatLng(beaches[i][1], beaches[i][2]);
      marker[i] = new google.maps.Marker({
          setClickable: 1,
          position: pos,
          map: map,
          icon: surferDude,
          title:beaches[i][0]
      });
        google.maps.event.addListener(marker[i], 'mouseover', function() {
            // do something here on mouseover
                        console.log(i);
            });
    }

鼠标悬停时控制台中的输出总是3？为什么会这样？我需要它是1、2或3，这取决于我鼠标悬停在哪个图标上。

Answer 1

是的，这是关于范围的。当回调被调用时，当您添加侦听器时，它将使用i的最后一个值，而不是i的值。您正在构建的匿名函数是一个闭包，它捕获i变量而不对其求值，在调用回调之前不会对i求值，到那时，i将为3。

通常的打破封闭的解决方案应该有效：

function create_listener(i) {
    return function() {
        console.log(i);
    };
}
//...
google.maps.event.addListener(marker[i], 'mouseover', create_listener(i));

您也可以使用自执行函数而不是单独的create_listener，但这可能太吵了。