Javascript:变量作用域和匿名函数的问题

Question

我有这个示例代码:

function(){
  var events = [];
  var pages = ["a", "b", "c"];
  for(var pageIndex in pages){
    var pageName = pages[pageIndex];
    var e = function(){
      console.info(pageName);
    };
    events.push(e);
  }
  for(var eventIndex in events){
   console.info("index: " + eventIndex);
   events[eventIndex]();
  }
}

输出:

index: 0 
c 
index: 1 
c 
index: 2 
c 

期望的输出:

index: 0 
a 
index: 1 
b 
index: 2 
c 

这有标准做法吗？

Answer 1

您创建的每个 e 函数都是一个闭包，它从封闭代码访问外部变量 pageName。它将看到的 pageName 是函数运行时的值。因此，在循环结束时，pageName 为 "c"，这就是所有函数在执行时将使用的内容。

您可以通过以下方式包装函数来解决此问题，这实际上会将 pageName 的当前值绑定(bind)到您创建的函数:

function(){
  var events = [];
  var pages = ["a", "b", "c"];
  for(var pageIndex in pages){
    var pageName = pages[pageIndex];
    var e = (function(data) {
      return function() {
        console.info(data);
      };
    })(pageName);
    events.push(e);
  }
  for(var eventIndex in events){
   console.info("index: " + eventIndex);
   events[eventIndex]();
  }
}