js中变量的作用域是怎么一回事？

源自：5-1 编程挑战

js中变量的作用域是怎么一回事？

as=box.getElementsByTagName('a')；

for(var i=0; i<as.length; i++) {
        as[i].onmouseover = function() {
            this.style.background = '#D0D6D9';
        }
        as[i].onmouseout = function() {
            this.style.background = '#FFF';
        }
        as[i].onclick = function() {
            title.innerHTML = this.innerHTML;
        }
    }

上段代码中，使用this.style可以而使用as[i].style为什么不可以？？？

提问者：召唤师 2016-04-17 18:02

个回答

猴塞勒个雷

2016-04-18 10:01:59

已采纳

你绑定事件是i只是个引用，循环结束后i的值就变了，你可以试试每次输出的i都死i.length.在js中for是无作用域的。执行dom节点操作时取得便是for最后的i++的值.这是JavaScript一个经典问题:在遍历数组时对DOM监听事件,索引值始终等于遍历结束后的值.
解决方法:
方法一:利用必包
for(var i=0;i<as.length;i++){
(function (_i){
as[_i].onmouseover = function() {
            this.style.background = '#D0D6D9';
        }
        as[_i].onmouseout = function() {
            this.style.background = '#FFF';
        }
        as[_i].onclick = function() {
            title.innerHTML = this.innerHTML;
        }
})(i);
}
方法二:给DOM节点添加_index属性,属性值等于索引
for(var i=0;i<as.length;i++){
    as[i]._index=i;
    as[i].onclick=function(){
        as[i].onmouseover = function() {
            this.style.background = '#D0D6D9';
        }
        as[i].onmouseout = function() {
            this.style.background = '#FFF';
        }
        as[i].onclick = function() {
            title.innerHTML = this.innerHTML;
        }
    }
}

3