遍歷元素綁定事件時做用域是怎麼回事啊，爲何要用this關鍵字，而直接使用元素自己就不行？

以下代碼，將this改成rows[i]爲啥不起做用了

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

做者：鄭粲
連接：https://www.zhihu.com/question/30759173/answer/49334835
來源：知乎
著做權歸做者全部，轉載請聯繫做者得到受權。

單看這個函數

function () {
    rows[i].style.backgroundColor = '#f2f2f2';
};

這類的在循環內部定義的匿名函數，rows[i] 裏的 i 保存的是外部循環變量 i 的最後一個結果，對於這個循環也就是 rows.length。而 rows[rows.length] 是不存在的（數組的最後一項也就是 rows[rows.length - 1]）。

若是想使得函數於列表項一一對應，能夠在使用一個閉包對 i 進行一次保存，也就是這樣：

rows[i].onmouseover = (function (n) {
    return function () {
        rows[n].style.backgroundColor = '#f2f2f2';
    }
}(i));

也能夠這樣：

for (var i = 0; i < rows.length; i++) {
    rows[i].index = i;
    rows[i].onmouseover = function () {
        rows[this.index].style.backgroundColor = '#f2f2f2';
    }
}
// 經過給對應項添加屬性 index 來保存 i 的值