问题描述
我们都知道，如果我们对于一组元素（相同的标签）同时进行onclick事件处理的时候（在需要获取到索引的时候），一般是写一个for循环，但是onclick是一个异步调用的，所以会带来一个问题，当我们触发这个事件的时候，我们能获取的i值是for完整执行完后i的值，而不能获取到代码顺序里i的值，看一个例子
window.onload = funtion(){
var lis = document.getElementsByTagName('li');
for( var i = 0; i < lis.length; i ++ ){
lis[i].onclick = function(){
console.log(i);//当我们点击面页里的li时候 i 总是等于lis.length
};
}
};
以前惯用的解决方式
window.onload = funtion(){
var lis = document.getElementsByTagName('li');
for( var i = 0; i < lis.length; i ++ ){
lis.index = i;
lis[i].onclick = function(){
console.log( this.index );//每个li对应有着自己的索引值，也就可以判断出是什么时
};
}
};
利用闭包解决
window.onload = function(){
var lis = document.getElementsByTagName('li');
for( var i = 0; i < lis.length; i++ ){
(function (n){
lis[n].onclick = function(){
console.log( i + '-' + n );//i总是等于10 而n则是安装顺序
};
}(i));
}
};
原理：闭包的局部作用域。由于这个你们函数总是和代码执行顺序一样的，所以n可以实时记录i的值。由于for每执行一次，就执行一次匿名函数，每一次执行有自己的执行环境，有着自己的作用域链，所以用这函数里面一个变量来记录一下实时的i的值，这个n是不会随着i的改变而改变的
