1、首先来看一个列子
结果怎么不是我们所期望的那样输出1,2,3？
由这个列子在进行深扩展至我们平时项目中遇到的一种情况
输出结果是：
我点击的是第7个li元素，结果显示的为第10个li元素
我点击的是第5个li元素，结果显示的为第10个li元素
我点击的是第4个li元素，结果显示的为第10个li元素
我点击的是第7个li元素，结果显示的为第10个li元素
这和第一例子输出的结果都没有达到自己期望的那样，为什么会出现这种情况了，我的理解如下
1、首先这个和js的作用域链的产生即词法作用域 和执行上下文有关系
js的作用域大概包过如下三种：global function eval ，主要来说说function，js的作用域的产生为静态的作用域即在该函数创建时刻就产生了而且不会改变
比如
var a = 2;
function test(){
console.log(a);
}
function b (){
var a =3;
test();
}
b();//结果为2而不是3
这个就是因为js的作用域是在函数创建的时候就已经确定下来了，当执行到test函数的时候它会先去自己的作用域链上去查找变量a，此时在test形成的函数作用域中并没有查找到变量a，然后它就继续按照自己的作用域链向上查找结果在全局作用域中匹配到变量a...
了解这个原理之后我们在回到之前讲过的那个函数中来看
var clickObj = document.getElementsByTagName('li');
//为每一个li元素添加一个点击事件
for(var i= 0;i<clickObj.length;i++){
var clickObj[i].index = i;
clickObj[i].onclick = function(){
console.log(i);
}
}//完整的代码请看上面
//结果就是无论你点击哪个li标签打印出来的都是10（clickObj.length的值）
先来一步一步进行分析
1：初始化页面的时候开始执行for循环里的代码这样就为每个li元素都绑定了点击事件，在点击事件触发之前for循环已经执行完毕，此时i的值为10，也就是页面初始化后全局变量i的值为10，当你触发点击事件后，该点击事件函数会进行i值的查找，最终他在全局作用域里找到了变量i的值此时i的值为10，所以无论你点击哪个li，输出结果都是10；
为了辅助理解：可以参考下面例子
那既然了解产生的原因那么我们该如何去解决该问题了
2.产生上述结果的主要原因在于闭包的影响，如果能将每次循环后点击事件函数的作用域都不一样，这样问题不就可以解决了吗，将上述函数进行改造：
输出结果就是我们所期望的了
这个就是利用每次循环后给每一个点击事件函数在初始化时提供对应的i值，在进入执行上下文后也就是执行点击函数时,会根据作用域链从子向父进行查找，每个不同li元素的点击事件函数都形成一个单独的闭包，所以每次点击后返回的i值就是对应于那个函数形成的闭包中的i；
网友评论