for循环里的子函数获取i值问题

在做一个换肤效果的时候遇到的一个问题，就是for（）循环里写事件函数，得到的i值永远是循环后的值，没有办法得到实时值。类似于这样

   var img = document.getElementsByTagName("img");
    for (var i = 0; i < img.length; i++) {
       img[i].onmouseover = function () {
           console.log(i) // 5
       }
    }

这是因为闭包中共用i值，而i的值由于执行for循环，都变为了5。

解决办法是这样的：

 var img = document.getElementsByTagName("img");
    for (var i = 0; i < img.length; i++) ~function (i) {
        img[i].onmouseover = function () {
            console.log(i) // 0 1 2 3 4
        }
    }(i)

原理是这样的，自定义匿名函数立即调用，而img里的onmouseover事件与自定义函数，形成了闭包，子函数可以访问父辈函数的变量，而自定义函数实时调用，所以，子函数就可以实时获取到i值。这里的~符号也可以换成其他符号，类似于+ - * / ，都是可以的。

还可以这样写

 var img = document.getElementsByTagName("img");
    for (var i = 0; i < img.length; i++) {
        getConsole(i);
    }
    function getConsole(i) {
        img[i].onmouseover = function () {
            console.log(i);
        }
    }

简化后是这样的

 var img = document.getElementsByTagName("img");
    for (var i = 0; i < img.length; i++) {
        (function (i) {
            img[i].onmouseover = function () {
                console.log(i);
            }
        })(i)
    }

其实，原理都是一样的，只是写法不同。希望给有同样此类问题的朋友们带去一些帮助！

写在最后：今天星期天，同样也是教师节，记得我上学的时候就没碰到过教师节放假的时候，觉得对老师挺不公平的，怎么说也是老师的节日呀。在这里，祝福天下所有的老师，教师节快乐！