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