js中的作用域的问题

Question

var btns = document.querySelectorAll('.btn'); // 6 elements
var output = document.querySelector('#output');
var events = [1, 2, 3, 4, 5, 6];

// Case 1
for (var i = 0; i < btns.length; i++) {
btns[i].onclick = function(evt) {

output.innerText += 'Clicked ' + events[i];

};
}

// Case 2
for (var i = 0; i < btns.length; i++) {
btns[i].onclick = (function(index) {

return function(evt) {
  output.innerText += 'Clicked ' + events[index];
};

})(i);
}

// Case 3
for (var i = 0; i < btns.length; i++) {
btns[i].onclick = (function(event) {

return function(evt) {
  output.innerText += 'Clicked ' + event;
};

})(events[i]);
}

为何case1那里的绑定方法是错误的？

Answer 1

因为当你click的时候i已经是 btns.length 了，这跟js的闭包有关系，建议你了解一下。

解决办法有很多种，常见的有如下三种办法(建议你了解完闭包之后再回来看)：

//1.  最简单的方法  将变量 i 保存给在每个btns对象上
    for (var i = 0; i < btns.length; i++) {
        btns[i].index = i;
        btns[i].onclick = function(evt){
            output.innerText += 'Clicked ' + events[this.index];
        }
    }
//2.  将变量 i 保存在匿名函数自身
        for (var i = 0; i < btns.length; i++) {
            (btns[i].onclick = function(evt){
                output.innerText += 'Clicked ' + events[arguments.callee.i];
            }).i = i;
        }

//3.  加一层闭包，i 以局部变量形式传递给内层函数
        for (var i = 0; i < btns.length; i++) {
            (function(){
                var temp = i;
                btns[i].onclick = function(evt){
                    output.innerText += 'Clicked ' + events[temp];
                }
            })();
        }

Answer 2

请了解js闭包

Answer 3

js闭包相关，找下相关的文章或者书籍看看