经典闭包问题

经典闭包问题

你好！在学习js时 常遇到闭包的问题比较棘手 难以理解，接下来我将用一个小案例配合图形 来为大家解释一下原理，希望能对大家的学习有所帮助
（如有不妥之处请指教）

代码如下

for(var i=0;i<5; i++){
    setTimeout(function(){
        console.log(i,(new Date).toLocaleString())
    },1000*i);
}

注释：// i的执行结果为 5 5 5 5 5 （for先执行完了 i为5）
// 解释如下： 因为 for循环部分和 setTimeout console.log为同步事件 , funcition(){},1000*i为 异步操作 所以先将异步操作的部分存放到 任务队列中去（task list） 然后 先执行同步操作的部分 再通过 事件轮询(event loop 监听器)读取它的时间 当1000毫秒结束以后，通知主线程将它的异步操作部分拉回去（在主线程的末尾，同步操作完了，再执行它）
// 注： 协程里边是 先进先出 所以i是按顺序执行的

此时要输出 0 1 2 3 4 我们该如何解决呢？

方案如下：

//第一种解决方法
			for(i=0;i<5;i++)                                 
			{
				(function(i){
				setTimeout(function(){
					console.log(i);
				},1000);
				})(i);
			}      //输出  0 1 2 3  4  
			

// 第二种解决方法
			for(i=0;i<5;i++)
			{
              setTimeout(function(i){
				  console.log(i);
			  },1000,i)
			}              //输出  0 1 2 3  4 

解释如下：
setTimeout有两个参数，第一个参数是回调函数，第二个参数是毫秒数，表示要执行回调函数所要延迟的时间。但我们还需要知道的是，setTimeout会返回一个Id，即这个定时器的Id，在上面的代码中其实已经创建了5个定时器，但是默认只返回了最后的一个Id，所以会先输出一个5。
因为5个定时器所打印出来的是同一个i变量，所以想要实现输出不同的数字，就需要把每个定时器所访问的变量独立起来，这就用到了JavaScript的闭包。闭包用途很多，可以很好地区分开各个作用域，避免变量的混淆，但是滥用闭包也会导致性能问题。那么通过下面的修改就可以了；

图片解析：

作者： 叶刚