js循环与局部变量的问题

[weixin_39670158]

我想给第一个li 的onclick 弹出1 第二个弹出2
for(var i=0;i<cRes.length;i++){
cRes[i].onclick=function(){
alert("id为"+this.id+ "的编号为"+i);}
}
id是可以正常读取的，但是编号全部都是12,这是为什么？

[天际的海浪]

因为你需要在事件内使用事件外的循环变量i。
当事件触发时，那个循环早就结束了，那时的i的值已经是循环最大值加1了。
所以需要用一些方式保存住当前循环的i的值。
方案1为：用闭包保存住当前循环的i的值。
for(var i=0;i<cRes.length;i++) {
	(function(i){
		cRes[i].onclick=function(){
			alert("id为"+this.id+ "的编号为"+i);
		}
	})(i);
}

方案2为：用let块作用域变量，原理也是闭包（ie11以前不支持）
for(var i=0;i<cRes.length;i++) {
	let j = i;
	cRes[i].onclick=function(){
		alert("id为"+this.id+ "的编号为"+j);
	}
}

方案3为：在事件函数内不使用循环变量i，而是用this获取触发事件的元素
for(var i=0;i<cRes.length;i++) {
	cRes[i].index = i;
	cRes[i].onclick=function(){
		alert("id为"+this.id+ "的编号为"+this.index);
	}
}

[weixin_39670158]

引用 1 楼 jslang 的回复:

因为你需要在事件内使用事件外的循环变量i。
当事件触发时，那个循环早就结束了，那时的i的值已经是循环最大值加1了。
所以需要用一些方式保存住当前循环的i的值。
方案1为：用闭包保存住当前循环的i的值。
for(var i=0;i<cRes.length;i++) {
	(function(i){
		cRes[i].onclick=function(){
			alert("id为"+this.id+ "的编号为"+i);
		}
	})(i);
}

方案2为：用let块作用域变量，原理也是闭包（ie11以前不支持）
for(var i=0;i<cRes.length;i++) {
	let j = i;
	cRes[i].onclick=function(){
		alert("id为"+this.id+ "的编号为"+j);
	}
}

方案3为：在事件函数内不使用循环变量i，而是用this获取触发事件的元素
for(var i=0;i<cRes.length;i++) {
	cRes[i].index = i;
	cRes[i].onclick=function(){
		alert("id为"+this.id+ "的编号为"+this.index);
	}
}

当事件触发时，那个循环早就结束了 为什么循环结束了还能读到局部变量i 而不是udf？ 循环过程中不是直接把i赋给onclick就可以了，为什么不这样做？这样的事件绑定机制或者说局部变量***有什么优缺点？

[天际的海浪]

循环结束了还能读到局部变量i也是因为闭包，与方案1中的闭包不同，是for循环所在的函数形成的闭包。 for循环和onclick事件没有实质性直接关联。为什么要把i赋给onclick