淺談JavaScript for循環(huán) 閉包

字號:


    下面小編就為大家?guī)硪黄獪\談JavaScript for循環(huán) 閉包。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。
    有個網友問了個問題,如下的html,為什么每次輸出都是5,而不是點擊每個p,就alert出對應的1,2,3,4,5。
    <html >   
    <head>   
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   
    <title>閉包演示</title>   
    <script type="text/javascript">   
    function init() {   
      var pAry = document.getElementsByTagName("p");   
      for( var i=0; i<pAry.length; i++ ) {   
         pAry[i].onclick = function() {   
         alert(i);   
      }   
     }   
    }   
    </script>   
    </head>   
    <body onload="init();">   
    <p>產品一</p>   
    <p>產品二</p>   
    <p>產品三</p>   
    <p>產品四</p>   
    <p>產品五</p>   
    </body>   
    </html>
    解決方式有以下幾種
    1、將變量 i 保存給在每個段落對象(p)上
    function init() {   
     var pAry = document.getElementsByTagName("p");   
     for( var i=0; i<pAry.length; i++ ) {   
       pAry[i].i = i;   
       pAry[i].onclick = function() {   
        alert(this.i);   
       }   
     }   
    }   
    2、將變量 i 保存在匿名函數(shù)自身 
    function init2() {   
     var pAry = document.getElementsByTagName("p");   
     for( var i=0; i<pAry.length; i++ ) {    
      (pAry[i].onclick = function() {   
        alert(arguments.callee.i);   
      }).i = i;   
     }   
    }
    3、加一層閉包,i以函數(shù)參數(shù)形式傳遞給內層函數(shù)
    function init3() {   
     var pAry = document.getElementsByTagName("p");   
     for( var i=0; i<pAry.length; i++ ) {   
      (function(arg){     
        pAry[i].onclick = function() {     
         alert(arg);   
        };   
      })(i);//調用時參數(shù)   
     }   
    }   
    4、加一層閉包,i以局部變量形式傳遞給內存函數(shù)
    function init4() {   
     var pAry = document.getElementsByTagName("p");   
     for( var i=0; i<pAry.length; i++ ) {    
      (function () {   
       var temp = i;//調用時局部變量   
       pAry[i].onclick = function() {    
        alert(temp);    
       }   
      })();   
     }   
    }   
    5、加一層閉包,返回一個函數(shù)作為響應事件(注意與3的細微區(qū)別)
    function init5() {   
     var pAry = document.getElementsByTagName("p");   
     for( var i=0; i<pAry.length; i++ ) {    
      pAry[i].onclick = function(arg) {   
        return function() {//返回一個函數(shù)   
        alert(arg);   
       }   
      }(i);   
     }   
    }  
    6、用Function實現(xiàn),實際上每產生一個函數(shù)實例就會產生一個閉包
    function init6() {   
      var pAry = document.getElementsByTagName("p");   
      for( var i=0; i<pAry.length; i++ ) {    
       pAry[i].onclick = new Function("alert(" + i + ");");//new一次就產生一個函數(shù)實例  
      }   
    }  
    7、用Function實現(xiàn),注意與6的區(qū)別
    function init7() {   
      var pAry = document.getElementsByTagName("p");   
      for( var i=0; i<pAry.length; i++ ) {   
         pAry[i].onclick = Function('alert('+i+')')  
      }   
    }
    以上就是小編為大家?guī)淼臏\談JavaScript for循環(huán) 閉包全部內容了