Javascript范围和调用函数

Question

我的代码:

for (var i = 0; i < mapInfos.length; i++) {

            var x = function () { doStuff(i); };
            google.maps.event.addListenerOnce(mapInfos[i].map, 'tilesloaded', x);
}

doStuff方法只是警告i的值.mapInfos有两个条目,所以你希望它提醒0和1,而是它警告2和2.我可以模糊地理解它为什么这样做(虽然var我应该把它保持在循环范围的本地？)但是我怎样才能让它按预期工作呢？

Answer 1

编辑 - 请注意,首次发布时,原始问题包含一个指向jsfiddle的链接,该链接似乎是当前问题试图实现的相关示例,只是看起来有效...

jsfiddle中的代码有效,因为该代码中只有一个"i".在第二个循环中使用的"i"(实际上调用函数)与第一个循环中使用的"i"相同.因此,您得到了正确的答案,因为第二个循环正在运行"i" 再次通过从0到4的所有值.如果您添加:

i = 100;
functions[0]();

你会打印100张.

在JavaScript中引入新范围的唯一方法是函数.一种方法是编写一个单独的"函数制造者"函数:

function makeCallback(param) {
  return function() {
    doStuff(param);
  };
}

然后在你的循环中:

for (var i = 0; i < mapInfos.length; i++) {
  var x = makeCallback(i);
  google.maps.event.addListenerOnce(mapInfos[i].map, 'titlesloaded', x);
}

这将起作用,因为对"makeCallback"函数的调用将"i"的值的副本隔离到返回的闭包中的"param"的新的唯一实例中.