【JavaScript】一个简单的隔行变色，鼠标移入移出的问题

Question

为什么此处只能用this，如果把this换成oLis就是错的？

 <script type="text/javascript">
    var oLi = document.getElementsByTagName("li");
    for (var i = 0; i < oLi.length; i++) {
        var oLis = oLi[i];
        i % 2 === 0 ? (oLis.className = "c1" , oLis.old = "c1") : (oLis.className = "c2", oLis.old = "c2");
        oLis.onmouseover = function () {
            this.className = "c3"; //为什么此处只能用this，如果把this换成oLis就是错的？
        };
        oLis.onmouseout = function () {
            this.className = this.old;
        };
    }
</script>

Answer 1

首先说下this。this是指向事件的调用者。
然后

  var oLi = document.getElementsByTagName("li"); 

获取到的是伪数组。所有的li元素都放入oLi变量里面了。
其次for循环语句 里面的

  var oLis = oLi[i];

是把当前循环的 i 作为变量oLi的索引值，找到oLi伪数组当前执行的li元素。for每循环一次都会创建一个oLis，也就是一共有。。。你有多少li我就有多少oLis。

 oLis.onmouseover = function () {
            this.className = "c3"; //为什么此处只能用this，如果把this换成oLis就是错的？
        };

这个语句的意思就是当鼠标移入当前li的时候当前li的样式发生改变。前面说了，this指向事件的调用者。这里鼠标移入的调用者是oLis，也就是for语句当前这个循环里面的li。for循环里面有很多oLis，这里调用的是当前循环的oLis。
如果把this换成oLis那么就不一定指的是当前循环的oLis。它可能指的是for语句执行完毕后oLis，当然会报错了。用this指向当前调用对象li元素，用oLis就不一定是当前的li了。
例如

var count = 10;
for (var i=0; i<count; i++) {
    console.log(i);
}
alert(i);    // 这里弹出10

最后弹出的结果并不是哪一个循环里面的i，而是最后的10. 不知这样讲解能不能清楚。