循环遍历为什么需要将 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。