为什么这段闭包代码里的arr[i]都为5?

function box () {
            var arr = [];
            for (var i = 0; i < 5; i++) {
                arr[i] = function () {
                    return i;
                }
            };
            return arr;
        }
        //--------------------------
        var  b = box();
        alert(b[0]());//5
        for (var i = 0; i < b.length; i++) {
            alert(b[i]());
        };

如以上代码,当alert(b0时,为什么是5?同样,当执行下面的for循环时,会出现5个5,我听别的解释因为for循环执行太快了所以最后才都是5,但是没听懂...求大神解释一下..

阅读 4.3k
3 个回答

跟快慢没有任何关系!

而是因为:

内部函数是在for循环中定义的,但是却是在for循环之后调用的。调用的时候box函数早就返回了。

所以,哪怕for循环再慢,哪怕for循环慢到要执行一个小时,结果也是一样的。

所以你不能因为函数是在for循环里面定义的,就认为函数里的i就是循环的那个时候的值啊。for循环里面那个叫函数声明,下面那个才叫函数调用啊。

最后在多说一句:大家之所以经常搞不懂类似的闭包问题,是因为总觉得内部函数在for循环里边的时候就把i的值给取了。这是错误的!因为在函数定义的时候,是不对函数体中的内容进行解析的。i在在调用的时候取的,那个时候i早就变成5了。

作用域的问题

function box () {
  var arr = [];
  for (var i = 0; i < 5; i++) {
     arr[i] = function () {
        return i;
      }
  };
  return arr;
}

等价于

function box () {
  var arr = [],
      i = undefined;
  for (i = 0; i < 5; i++) {
     arr[i] = function () {
        return i;
      }
  };
  return arr;
}

你可能会认为变量i存在与{}所形成的作用域内,但并不是。

访问arr[0]时候会沿作用域链向上查询变量i但此时的box作用域里的i因为循环早已变成5了。

解决
es6在线编译

/* es6 */
function box () {
      var arr = [];
      for (let i = 0; i < 5; i++) {
          arr[i] = function () {
              return i;
          }
      };
      return arr;
  }

把var关键字改成let

或者是这样创建新的作用域来缓存变量

function box () {
      var arr = [];
      for (var i = 0; i < 5; i++) {
          (function(_i){
              arr[i] = function () {
                  return _i;
              }
          })(i)  
      };
      return arr;
  }

因为我们在这里创建了5个闭包,而它们都指向了一个共同的局部变量i。

但是,闭包并不会记录它们的值,它们所拥有的只是相关域在创建时的一个连接(即引用)。
变量i恰巧存在于定义这5个函数域中。

对这5个函数中的任何一个而言,当它要去获取某个变量的时候,它会从其所在的域开始逐级寻找那个距离最近的i值

由于循环结束时i的值为3,所以这3个函数都指向了这一共同值。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进