JavaScript：谈循环中的匿名函数

先看下面的代码
<SCRIPT LANGUAGE="JavaScript">
  <!--
  function Delete_Row(i)
  {
    alert(i);
  }
  function test()
  {
       for(var i = 0; i < 5;i++ )
       {
             var table11 = document.getElementById("table11");
             var tr11 = table11.insertRow();
             var trstr="tr"+tr11.rowIndex;
             tr11.id=trstr;

            tr11.ondblclick=function()
            {
                       Delete_Row(trstr);
            };

             var td11 = tr11.insertCell();
             td11.innerHTML = i;
             td11 = tr11.insertCell();
             td11.innerText = "我爱你";
             td11 = tr11.insertCell();
             td11.innerText = "笨蛋";
             td11 = tr11.insertCell();

    }
    }
  //-->
  </SCRIPT>
  <table id="table11" border=1>
  <tbody>
  <tr>
  <td>第一列</td>
  <td>第二列</td>
  <td>第三列</td>
  </tr>
  </tbody>
  </table>
  <br>
  <input type="button" value="GO" onclick="test()">

 

点击按钮之后，会在table11中插入5行，行的双击事件就是使用了匿名函数。
试想，点击第2行和第3行，你会看到什么，会是alert('tr0') 和 alert('tr1')吗，和你想的一样？
 很显然不是我想要的结果，而是弹出了alert('tr5')，真是有点儿怪哦！可以肯定的是问题肯定是出在匿名函数上，有可能是这个行的双击事件都指向了同一下匿名函数，不知道各位有什么看法？

而把上述代码修改成如下代码，就会得到我们想到的结果。

<SCRIPT LANGUAGE="JavaScript">
  <!--
  function Delete_Row(i)
  {
    alert(i);
  }
  function test()
  {
           for(var i = 0; i < 5;i++ )
           {
 
             var table11 = document.getElementById("table11");
            
             var tr11 = table11.insertRow();
             var trstr="tr"+tr11.rowIndex;
             tr11.id=trstr;

             tr11.ondblclick=f(trstr);
             var td11 = tr11.insertCell();
             td11.innerHTML = i;
             td11 = tr11.insertCell();
             td11.innerText = "我爱你";
             td11 = tr11.insertCell();
             td11.innerText = "笨蛋";
             td11 = tr11.insertCell();

        }
    }
    function f(i)
    {
        return  function()
        {
               Delete_Row(i);
        }
    }
  //-->
  </SCRIPT>
  <table id="table11" border=1>
  <tbody>
  <tr>
  <td>第一列</td>
  <td>第二列</td>
  <td>第三列</td>
  </tr>
  </tbody>
  </table>
  <br>
  <input type="button" value="GO" onclick="test()">

欢迎大家发表看法!