this的问题

Question

    var orders=document.getElementsByClassName("order");
    for(var i=0;i<orders.length;i++){
        orders[i].index=i;
        orders[i].onclick=function(){
            console.log(orders[i].index);
        }
    }

报错如下所示：

    var orders=document.getElementsByClassName("order");
    for(var i=0;i<orders.length;i++){
        orders[i].index=i;
        orders[i].onclick=function(){
            console.log(this.index);
        }
    }

而将orders[i]改成this的时候却能够正常运行。
我的疑问是this指向的是当前的对象，而当前对象就是orders[i]，为什么我换了一下就报错了呢？

Answer 1

常见闭包问题。。
因为click时的i已经是为orders.length了。所以orders[i]是undefined。
this的话不同，就是当前对象。

Answer 2

你问题的方向错了，这个不是this的问题。
你上面之所以不行，是以为 console.log(orders[i].index);这个i出了问题，这个i = orders.length .
好好理解下

Answer 3

你换个思路想一想，两个orders[i]一定是相等的，互相都是指向对方吗？ 前一个orders[i]也是这个名字，他们指向是不确定的，相当于后面每次运行都把前面的index都给覆盖了，最后可能就给最后一个加上了index，前面都没这个属性，也就无法读取。
当然这只是一种思考方法，确实就是闭包的问题。

Answer 4

1. 你想一下，如果没有点击，这个for也会进行循环，这里的i是最后循环的结果，而不是你要的结果。
2. 所有的dom事件的回调函数内this指向事件所在元素。