Question

a = [];
for (var i = 0; i < 3; i++) {
   a.push(function() {
      console.log(i);
   })
}

a[0]()     // I want 0, but I get 3

我正在尝试编写一段简单的代码，其中我有一个函数数组，这样当我在特定索引处执行函数时，应该打印索引值。

但是，上面的代码显示了所有索引值的相同结果（在本例中为3）。我理解该值是通过引用指向的，因此指向i的最后一个值。有人可以指出如何以正确的方式做到这一点吗？

Answer 1

围绕一个功能包裹它。现在每次循环执行时，包装函数都有自己的值i。

a = [];
for (var i = 0; i < 3; i++) {
    (function(i){
        a.push(function() {
            console.log(i);
        })
   })(i);
}

a[0]()

Answer 2

您可以添加self executing function以充当模块。这样做，变量i的范围就在那个函数中。

＆＃13;

a = [];
for (var i = 0; i < 3; i++) {
   (function(i){
       a.push(function() {
           alert(i);
       })
   })(i);
}

a[0]()

＆＃13;

注意：在此块(function(i){ ... })(i)中，i可以有任何名称， i与循环之间没有任何关联和 i来自函数，即(function(r){ ... })(r)。

Answer 3

这是匿名函数的替代版本，可以一次创建和执行。

您遇到的问题是，在调用函数时，循环已经过评估，i的值已经达到3的最大值。在评估循环时，您需要捕获i的当前值。

var a = [];

for (var i = 0; i < 3; i++) {
  var fn = function() {
    console.log(arguments.callee.i);
  }
  fn.i = i; // Pass as 'i' parameter to 'fn'.
  a.push(fn);
}

a[0](); // The value 0 will be printed, rather than 3.

给猫皮肤涂抹的方法不止一种。上面的代码非常类似于：

var a = [];

function fn(i) {
  return function() {
    console.log(i);
  }
}

for (var i = 0; i < 3; i++) {
  a.push(fn(i));
}

a[0](); // The value 0 will be printed, rather than 3.

由于通过引用访问，值会被覆盖

3 个答案: