js闭包--关于在for循环中绑定事件打印变量i是最后一次。

闭包是指有权访问另一个函数作用域中的变量的函数，创建闭包的常见的方式，就是在一个函数内部创建另一个函数，通过另一个函数访问这个函数的局部变量。

在for循环里面的匿名函数执行 return i 语句的时候，由于匿名函数里面没有i这个变量，所以这个i他要从父级函数中寻找i，而父级函数中的i在for循环中，当找到这个i的时候，是for循环完毕的i，也就是5，所以得到五个5。
先看题目：

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

结果：
Sun May 05 2019 21:34:14 GMT+0800 (中国标准时间) 5

Sun May 05 2019 21:34:15 GMT+0800 (中国标准时间) 5
Sun May 05 2019 21:34:15 GMT+0800 (中国标准时间) 5
Sun May 05 2019 21:34:15 GMT+0800 (中国标准时间) 5
Sun May 05 2019 21:34:15 GMT+0800 (中国标准时间) 5
Sun May 05 2019 21:34:15 GMT+0800 (中国标准时间) 5
在这个函数里面的i其实引用的是最后一次i的值，为什么不是0,1,2,3,4…呢？因为在你for循环的时候，你并没有执行这个函数，你这个函数是过一秒才执行的，当执行这个函数的时候，它发现它自己没有这个变量i，于是向它的作用域链中查找这个变量i，因为这个时候已经for循环完了，所以储存在作用域链里面的i的值就是10，最后就打印出来10了。
1.用函数外部变量保存

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

结果：
Sun May 05 2019 21:34:14 GMT+0800 (中国标准时间) 0

函数引用外部变量是引用那个变量的最后一次的值。

2.自调
方法一：

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

结果：
Sun May 05 2019 21:34:13 GMT+0800 (中国标准时间) 5

Sun May 05 2019 21:34:14 GMT+0800 (中国标准时间) 0
Sun May 05 2019 21:34:14 GMT+0800 (中国标准时间) 1
Sun May 05 2019 21:34:14 GMT+0800 (中国标准时间) 2
Sun May 05 2019 21:34:14 GMT+0800 (中国标准时间) 3
Sun May 05 2019 21:34:14 GMT+0800 (中国标准时间) 4

为什么这样就可以呢？因为你在循环变量i的时候已经执行了函数，自然变量i是什么就打印出来什么。
方法二：

// 外面有函数包着就要调一下
for (var i = 0; i < 5; i++) { (function(j) {  
	setTimeout(function(j) { 
		console.log(new Date, j);
	 }, 1000); i})(i); 
}
 console.log(new Date, i);
 //也可以这样写
 for (var i = 0; i < 5; i++) { (function(j) {  
	setTimeout(function() { 
		console.log(new Date, j);
	 }, 1000); })(i); 
}
 console.log(new Date, i);

结果：
Sun May 05 2019 21:34:14 GMT+0800 (中国标准时间) 5

Sun May 05 2019 21:34:15 GMT+0800 (中国标准时间) 0
Sun May 05 2019 21:34:15 GMT+0800 (中国标准时间) 1
Sun May 05 2019 21:34:15 GMT+0800 (中国标准时间) 2
Sun May 05 2019 21:34:15 GMT+0800 (中国标准时间) 3
Sun May 05 2019 21:34:15 GMT+0800 (中国标准时间) 4
原理就是通过自执行函数，并且将变量i保存到这个自执行函数的参数中。
利用 JS 中基本类型的参数传递是按值传递的特征

//定时器不需要调，直接传参就可以了
 for (var i = 0; i < 5; i++) {
 	setTimeout(function(i) { 
 		console.log(new Date, i);
 	}, 1000,i);
 } 
 console.log(new Date, i);

为了代码可观，可以这样写：

var output = function (i) {
 	setTimeout(function() {
  		console.log(new Date, i); 
  	}, 1000);
 }; 
 for (var i = 0; i < 5; i++) { 
 	 output(i); // 这里传过去的 i 值被复制了
  } 
  console.log(new Date, i);

js闭包--关于在for循环中绑定事件打印变量i是最后一次。

猜你喜欢