闭包的两个经典例子

• 第一种

下面这段代码想要循环延时输出结果 0 1 2 3 4,请问输出结果是否正确,如果不正确,请说明为什么,并修改循环内的代码使其输出正确结果

for (var i = 0; i < 5; ++i) {
  setTimeout(function() {
    console.log(i + " ");
  }, 100);
}

输出结果为 5 5 5 5 5

答案：不能输出正确结果。

原因： js 运行环境为单线程，setTimeout 注册的函数需要等到线程空闲时才能执行，此时 for 循环已经结束，i 值为 5，又因为循环中 setTimeout 接受的参数函数通过闭包访问变量 i，所以 5 个定时输出都是 5。

修改方法：将 setTimeout 放在立即执行函数中，将 i 值作为参数传递给包裹函数，创建新闭包。

for (var i = 0; i < 5; ++i) {
  (function(i) {
    setTimeout(function() {
      console.log(i + " ");
    }, 100);
  })(i);
}

输出结果为： 0 1 2 3 4

• 第二种

function add() {
  var x = 1;
  console.log(++x);
}

add(); //执行输出2,

add(); //执行还是输出2,

怎样才能使每次执行有加 1 效果呢?使用闭包。

function add() {
  var x = 1;
  return function() {
    console.log(++x);
  };
}
var num = add();

num(); //输出2,

num(); //输出3,

num(); //输出4,