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

歡迎使用javascript中的閉包，您需要將函數包裝在IIFE中或立即調用函數表達式，該函數表達式創建一個閉包並將狀態保存在其范圍內：

(function(){

  var events = [];
  var pages = ["a", "b", "c"];

  for(var pageIndex in pages){
    var pageName = pages[pageIndex];
    var e = (function(pageName){
      return function() {console.info(pageName);};
    }(pageName));
    events.push(e);
  }

  for(var eventIndex in events){
   console.info("index: " + eventIndex);
   events[eventIndex]();
  }
}());

將其復制並粘貼到控制台調試器中以進行測試...

Answer 2

您創建的每個e函數都是一個閉包， pageName從封閉代碼訪問外部變量pageName 。 它將看到的pageName是函數運行時的值。 因此，在循環結束時， pageName為"c" ，這就是所有函數在執行時將使用的內容。

您可以通過以下方式包裝函數來解決此問題，這將基本上將pageName的當前值綁定到您創建的函數：

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

Answer 3

我在這里找到了答案。 我需要將我的函數包裝在另一個函數中。 多漂亮

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