发现无论点击多少次，最终都弹出这个结果，而需求期望的结果是：点击列表1弹出0，点击列表2弹出1，点击列表3弹出2……此时此刻只想用这幅图来形容现在的心情：
（当原型在演示时没能按设计的要求运行时的样子）
这可如何才好，为何总是弹出5呢？理论上很正确呀！我们不妨画图来分析下：
其实我们只是给每一个li的onclick其实就是保存的一段函数的描述字符串，这个字符串内容就是上图红框中的内容，如果您还是不信，我有图有真相：
在Chrome控制台下输入：lis[4].onclick，其值就是函数的描述。当我们在点击第5个列表时，其实就是相当于lis[4].onclick()，调用了这段函数描述，我们知道函数在被调用执行的时会形成一个私有作用域，在这个私有作用域下也是先预解释，然后代码执行，此时会去找i，在当前私有作用域下没有i，然后去window作用域下找到了i，因此每次点击都弹出5。
显然上面的代码无法满足这个需求，我们代码那么写是不正确的，我们思考一下出现问题的原因是什么？其实原因就是每次点击的时候都是读取的window下的i，此时这个i的值已经是5了，于是有了如下代码：
方式一：
复制代码 代码如下:
var lis = document.getElementById('ul').getElementsByTagName('li');
function fn(i) {
return function () {
alert(i);
}
}
for (var i = 0, len = lis.length; i < len; i++) {
lis[i].onclick = fn(i);
}
方式二：
复制代码 代码如下:
var lis = document.getElementById('ul').getElementsByTagName('li');
for (var i = 0, len = lis.length; i < len; i++) {
;(function (i) {
lis[i].onclick = function () {
alert(i);
};
})(i);
}
方式三：
复制代码 代码如下:
var lis = document.getElementById('ul').getElementsByTagName('li');
for (var i = 0, len = lis.length; i < len; i++) {
lis[i].onclick = function fn(i) {
return function () {
alert(i);
}
}(i);
}
一口气写了三种方式，其思想都是一样的，就是将这个变量i用一个私有变量存储起来，这里我就只讲方式二，当然明白其中一个其余也就都明白了。按照惯例，我们画图来一步步分析下：
我详细的对整个代码执行做了描述，需要注意的是：每个li的onclick属性都要占用(function(i){ … })(i)作用域，当这个函数执行完毕后不会被销毁，因为它被外面的li（这个li是window作用域下的）占用着，因此这个作用域不会被销毁。当点击任意一个li时，function(){ alert(i); }会被执行，也会形成一个作用域，这个作用域没有i，它会去(function(){ … })(i)作用域找i，最终在形参找到i，这个形参i的值就是for循环时传进去的；这个例子巧妙地使用闭包来贮存值，完美解决问题。
PS：刚刚说(function(i){ … })(i)为什么在前面加一个分号，其原因就是防止前面的语句忘记加分号，这样导致JavaScript在解析时出错，仅此而已。当然上面的一个应用场景就是Tabs实现原理，可以有其他实现方式，比如自定义属性方式、通过DOM节点关系找到索引，而撸主采用这样一种方式只是为了加深对闭包的理解。
总结
闭包并不是传说中的高大不好上，其核心就是理解函数定义、调用，函数调用时会形成一个新的私有作用域，当某个作用域被外面占用，那么这个作用域将不会被销毁。撸主读书甚少，有说得不对的地方请博友们指正，同时也感谢大家对撸主文章的支持。
您可能感兴趣的文章: