js中的索引值

写一个例子，很简单就能看懂：

结构：

<input type="text" />
<input type="text" />
<input type="text" />

js部分

        window.onload = function () {
            var aBtn = document.getElementsByTagName('input')
            var arr = ['王二', '王三', '王四']
            for (var i = 0; i < aBtn.length; i++) {
                aBtn[i].index = i
                aBtn[i].onclick = function () {
                    alert(i);//3
                    this.value = arr[this.index];
                }
                //闭包写法 
                // (function () {
                //     var ii = i;//将当前的i值保存到闭包方法中
                //     aBtn[i].onclick = function () {
                //         alert(ii);//0、1、2
                //         this.value = arr[ii];
                //     }
                // })();

            }
        }

在解释一下 不懂的可以看仔细读读：

 加了个alert就会发现，当点击文本框时，弹出的其实都是3。

  原因如下：

1. 首先for执行完成时i的值是3，这个应该知道。
2. 而i的作用域是在整个for中的，也就是说只要在for中改变了i的值，然后alert(i);就是i改变后的值了。
3. aBtn[i].index=i是将当时循环的i值保存到控件对象上，然后点击时直接获取当前触发的控件对象上的值，所以就能正常获取到0、1、2了。
4. 当然如果不想保存到控件对象，也是有办法实现的，代码中有一个闭包的注释，打开它，去掉for中的其它内容，就可以了，最后实现的效果是一样的