javascript - Js遍历元素并赋予事件绑定匿名函数时，为什么调试说未定义元素？

Question

表格鼠标悬停变色。代码： {代码...} chrome说的是 Uncaught TypeError: Cannot read property 'style' of undefined at HTMLTableRowElement.tr.(anonymous function).onmouseover 但是把tr[i]改为this就可以: {...

天蓬老师 · Answer

让我们先来假设页面上有5个tr，这样子比较好说明：

var tr=document.getElementsByTagName('tr');
for (var i = 0; i < tr.length; i++) {   
    tr[i].onmouseover = function on_tr_over() {
        tr[i].style.backgroundColor="#f2f2f2";
    };
}

// 因为你页面上的鼠标事件触发是在for循环之后的
// 这时候i的赋值是tr.length，也就是i是5
// 这5个tr分别是tr[0]到tr[4]，tr[5]是代表第6个tr元素了
// 而实际上页面上没有第6个tr，所以就是undefined了
// 当鼠标移到tr时，相当于执行下面的语句：
tr[5].style.backgroundColor="#f2f2f2"; // 调了undefined的style属性，所以报错了哦

而第二段代码传this的话，就是指向事件被触发的目标元素，这个是浏览器传给你了，所以一定正确

哈哈，这是形象的理解，希望对你有帮助。

伊谢尔伦 · Answer

 var tr=document.getElementsByTagName('tr');
 for (var i = 0; i < tr.length; i++) {
     tr[i].onmouseover=function(){
         tr[i].style.backgroundColor="#f2f2f2";
     }
     tr[i].onmouseleave=function(){
         tr[i].style.backgroundColor="#fff";
     }
 }

翻译一遍运行过程：

获取所有tr元素
遍历所有tr元素给他们绑定两个事件
循环结束，此时i值为tr.length
当移入某一个时，触发事件，去寻找tr[tr.length],得到的是undefined
当undefined.style时报错

怪我咯 · Answer

这个问题是闭包变量引用的问题， @UKer 已经回答得很清楚了。解决办法你已经给了一个，用 this。我再给你一个不用 this 的解决办法吧

var tr = document.getElementsByTagName("tr");
for (var i = 0; i < tr.length; i++) {
    (function(index) {
        tr[index].onmouseover = function() {
            tr[index].style.backgroundColor = "#f2f2f2";
        };
        tr[index].onmouseleave = function() {
            tr[index].style.backgroundColor = "#fff";
        };
    })(i);
}

大家讲道理 · Answer

函数里的tr[i]是运行时计算的，当循环执行完，这时i就等于tr.length了，再执行绑定的函数，那函数里的tr[i]其实等于tr[tr.length]，自然就报错了。解决办法可以使用闭包。

PHPz · Answer

楼上正解，等同于tr.length

ringa_lee · Answer

即便已经采纳答案感觉你还是没GET到点上。这个问题的关键是闭包。
看一下ES6的let。

举例：

你比较一下let和var来定义for中变量的不同。鼠标滑过前三个色块，看浏览器调试窗口的输出。再滑过后三个色块看看输出什么。