原生javascript学习：javascript闭包实例

之前看zakas的Professional JavaScript，读过闭包的章节，当时觉得理论上是理解了，把书上的案例都实践了一遍。但例子是纯粹控制台调试实现的，印象不深刻，今天练习原生javascript的时候碰上闭包，简单梳理一下。
先看实例的DEMO：
http://cssplusplus.com/demo/js/1_1_DivControl%20.html
实现代码：
01 <!DOCTYPE html>
02 <html>
03 <head>
04 <style>
05 #outer {
06     width: 500px;
07     margin: 0 auto;
08     padding: 0px;
09     text-align: center;
10 }
11 #changBox {
12     width: 100px;
13     height: 100px;
14     background: black;
15     margin: 10px auto;
16     display: block;
17 }
18 </style>
19 <script>
20 function changeStyle(elem, attr, value) {
21     elem.style[attr] = value;
22 }
23 window.onload = function() {
24     var Attr = ["width", "height", "background", "display", "display"];
25     var Val = ["200px", "200px", "red", "none", "block"];
26     var oBtn = document.getElementsByTagName("input");
27     var oDiv = document.getElementById("changBox");
28
29     for (i = 0; i < oBtn.length; i++) {
30         oBtn[i].index = i;
31         oBtn[i].onclick = function() {
32             (this.index == oBtn.length - 1) && (oDiv.style.cssText = "");
33             changeStyle(oDiv, Attr[this.index], Val[this.index]);
34         }
35     }
36 };
37 </script>
38 </head>
39 <body>
40 <div id="outer">
41 <input type="button" value="变宽">
42 <input type="button" value="变高">
43 <input type="button" value="变色">
44 <input type="button" value="隐藏">
45 <input type="button" value="重置">
46 <div id="changBox"></div>
47 </div>
48 </body>
49 </html>
如果我们把33行的：
1 changeStyle(oDiv, Attr[this.index], Val[this.index]);
改成：
1 changeStyle(oDiv, Attr[i], Val[i]);www.zzzyk.com
结果如何？
这是修改后的DEMO：
http://cssplusplus.com/demo/js/1_1_DivControlWrong.html
点击上面的button是没有任何反应的。
问题出现在闭包上，问题分析如下：
1. 我给每个button的onclick动作都绑定了一个function
2. 我点击button，就要调用这个function
3. 这个function执行到changeSytle，开始寻找参数
4. 参数中有变量 i， i 是多少？
5. 先从当前的匿名函数的作用域找 i，没有找到
6. 接着到window.onload 绑定的匿名函数去找（注意javascript里面没有块级作用域概念），找到 i
7. i 是多少？ i = oBtn.length，因为 window.onload 绑定的匿名函数返回后，变量 i 的值是 oBtn.length
8. 这正是onclick绑定的匿名函数的作用域链中保存的 i 引用的值

作者：黎宇浩

补充：web前端 , JavaScript ,