如何让这个匿名的Javascript函数引用正确的变量?

时间:2010-07-11 09:59:00

标签: javascript scope anonymous-function

示例:

var o = {};
for(var i = 0; i < 5; i++) {
  o[i] = function () {
      console.log(i);
  };
}

o[3]();

当我拨打o3时,即使我拨打o0,o4或其中任何一个,它也会在控制台上显示5。它将始终显示5,因为这是我的最后一个值。如何在创建匿名函数时显示i的值?在o3中应该在控制台中显示3。

2 个答案:

答案 0 :(得分:5)

你应该这样做:

var o = {};
for(var i = 0; i < 5; i++) {
  (function(i) { // <- self-executing anonymus function with a parameter i
    o[i] = function () {
        console.log(i); // <- i here will be the argument i, 
                        //    not the i from the loop
    };
  })(i); // <- pass i as an argument
}

o[3]();

您会创建名为 closure 的内容,以便保持 i 的状态。

Closure 表示内部函数保留对外部函数的引用,因此可以访问其变量和参数(即使在外部功能已返回。)

关闭的一个简单例子是:

function outer(arg) { 
  var variable = 5;
  arg = 2;
  function inner() {
    alert(variable);  // <- the inner function has access to the variables
    alert(arg);       //     and parameters of the outer function
  }
}

自执行(自调用或立即)函数是在声明后立即调用的函数。

(function() {
  alert("executed immediately");
})();

两者的结合以及只有函数在Javascript中具有范围的事实,引导您使用上述技术创建一个带有新函数的范围,该函数保留了 i 的状态,否则由于闭包而由内部函数改变。

答案 1 :(得分:1)

o[i] = (function (i) {
    return function () { console.log(i); }
})(i);