循环遍历为什么需要将 i 再记录一遍？

Question

js代码如下：

window.onload = function() {
        var menu = document.getElementById('menu'),
            ps = menu.getElementsByTagName('p'),
            uls = menu.getElementsByTagName('ul');
        for (var i = 0; i < ps.length; i++) {
            ps[i].id = i;  //为什么这里需要将 i 再记录一遍？
            ps[i].onclick = function() {
                uls[this.id].style.display = "block"; //这里直接写usl[i].style.display="block" 为什么不行？它们不是同一个i吗？
            };
        }
    };

html代码如下：

<div class="menu" id="menu">
    <div>
        <p>Web前端</p>
        <ul style="display:block">
            <li>JavaScript</li>
            <li>DIV+CSS</li>
            <li>jQuery</li>
        </ul>
    </div>
    <div>
        <p>后台脚本</p>
        <ul>
            <li>PHP</li>
            <li>ASP.net</li>
            <li>JSP</li>
        </ul>
    </div>
    <div>
        <p>前端框架</p>
        <ul>
            <li>Extjs</li>
            <li>Esspress</li>
            <li>YUI</li>
        </ul>
    </div>
 </div>

Answer 1

因为onClick不是立即执行的，实际上当事件处理函数执行时，这里如果使用i的话会引用同一个i，而且这个i值等于for循环结束时i的值。

实际上这里起的效果跟闭包是一样的，具体效果是让每一个事件处理函数都有属于它自身的i值，而不是引用同一个i。

Answer 2

如果你想直接使用usl[i]，需要使用let方式声明i。使用var声明不行的原因上面的回答已经说了，let声明的变量是在块内有效的。

Answer 3

<div class="menu" id="menu">
    <div>
        <p>Web前端</p>
        <ul style="display:none;">
            <li>JavaScript</li>
            <li>DIV+CSS</li>
            <li>jQuery</li>
        </ul>
    </div>
    <div>
        <p>后台脚本</p>
        <ul style="display:none;">
            <li>PHP</li>
            <li>ASP.net</li>
            <li>JSP</li>
        </ul>
    </div>
    <div>
        <p>前端框架</p>
        <ul style="display:none;">
            <li>Extjs</li>
            <li>Esspress</li>
            <li>YUI</li>
        </ul>
    </div>
 </div>
<script>
window.onload = function() {
    var menu = document.getElementById('menu');
    var ps = menu.getElementsByTagName('p');
    var uls = menu.getElementsByTagName('ul');
    for (var i = 0; i < ps.length; i++) {
        (function(i){
            ps[i].onclick = function() {
                uls[i].style.display = "block";
            };
        })(i);
    }
};
</script>

Answer 4

因为闭包的存在

Answer 5

你代码用的是var，函数作用域，for里面所有对i的引用都是共用同一块作用域。
因为js不是惰性求值，所以你代码里再记录一次i的时候，直接取得了当前i的值，而不是运行时查询闭包，所以能实现获取不同i值。如果不想再记录一遍的话，要不用let块作用域；要不每回访问i都建一个闭包存起来，但是这样子的话跟再记录一遍其实原理并没有大的差别，在代码量简单变量少的情况下随意建闭包就有点太浪费性能了。