【解决方案】闭包函数在for循环中的使用案例——for循环绑定监听事件索引值总是最后一个

请看以下两段代码，思考一下运行的结果是否一致呢？

代码一：

	for (var i = 0; i < as.length; i++) {
			(function () {
				var j = i;
				as[j].tt = tt;
				as[j].onclick = function () {
					this.tt.slide(j);
					return false;
				}
			})();
	}

代码二：

	for (var i = 0; i < as.length; i++) {
			// (function () {
				// var j = i;
				as[i].tt = tt;
				as[i].onclick = function () {
					this.tt.slide(i);
					return false;
				}
			// })();
	}

答案是不一致的，可以在循环内部绑定点击事件中输出索引值，如下：

代码一：

	for (var i = 0; i < as.length; i++) {
			(function () {
				var j = i;
				as[j].tt = tt;
				as[j].onclick = function () {
					console.log(j);
					this.tt.slide(j);
					return false;
				}
			})();
	}

代码二：

	for (var i = 0; i < as.length; i++) {
			// (function () {
				// var j = i;
				as[i].tt = tt;
				as[i].onclick = function () {
					console.log(i);
					this.tt.slide(i);
					return false;
				}
			// })();
	}

假设as.length = 3 ;当用户触发点击事件，

代码一运行的结果：1或2或3 （绑定成功）；

代码二运行的结果：控制台输出的值始终是 3 （绑定失败）。

原因分析：js引擎的解析机制是，执行的时候将for循环中代码执行，这个时候i变成最后的值，当发生onclick事件时，会找到运算之后的i，因此绑定的事件是最后的。

所以代码一采用了闭包函数的解决方法，成功的将循环的索引值传递到点击函数内部。

此处除了使用闭包的方法外，还可以通过给对象添加一个属性，通过属性来传递索引值，如下代码所示：

	for (var i = 0; i < as.length; i++) {
			as[i].tt = tt;
			as[i].index = i; 
			as[i].onclick = function () {
				console.log(i);
				console.log(this.index);
				this.tt.slide(this.index);
				return false;
			}
	}

此时输出结果：3，0 或 3，1 或 3，2 （绑定成功）

总之 i 的值是不变的。。。

参考资料： for循环绑定监听事件索引值总是最后一个