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

Question

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，但是没听懂...求大神解释一下..

Answer 1

跟快慢没有任何关系！

而是因为：

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

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

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

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

Answer 2

作用域的问题

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;
  }

Answer 3

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

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

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

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