日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
深入理解JavaScript的閉包特性

有個(gè)網(wǎng)友問了個(gè)問題，如下的html，為什么點(diǎn)擊所有的段落p輸出都是5，而不是alert出對應(yīng)的0，1，2，3，4。

公司主營業(yè)務(wù)：成都做網(wǎng)站、成都網(wǎng)站制作、移動(dòng)網(wǎng)站開發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實(shí)現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競爭能力。創(chuàng)新互聯(lián)建站是一支青春激揚(yáng)、勤奮敬業(yè)、活力青春激揚(yáng)、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊(duì)。公司秉承以“開放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對我們的高要求，感謝他們從不同領(lǐng)域給我們帶來的挑戰(zhàn)，讓我們激情的團(tuán)隊(duì)有機(jī)會(huì)用頭腦與智慧不斷的給客戶帶來驚喜。創(chuàng)新互聯(lián)建站推出梅河口免費(fèi)做網(wǎng)站回饋大家。

 
 
    
  
  
  1.  
    2. 
  
  
  2.  
    3. 
  
  
  3.  
    4. 
  
  
  4.  
    5. 
  
  
  5. 閉包演示 
    6. 
  
  
  6.  
    7. 
  
  
  7.     p {background:gold;}  
    8. 
  
  
  8.  
    9. 
  
  
  9.    
    10. 
  
  
  10.    
    11. 
  
  
  11.    
    12. 
  
  
  12. 產(chǎn)品 0
       
    13. 
  
  
  13. 產(chǎn)品 1
       
    14. 
  
  
  14. 產(chǎn)品 2
       
    15. 
  
  
  15. 產(chǎn)品 3
       
    16. 
  
  
  16. 產(chǎn)品 4
       
    17. 
  
  
  17.    
    18. 
  
  
  18.   
    19.

以上場景是初學(xué)者經(jīng)常碰到的。即獲取HTML元素集合，循環(huán)給元素添加事件。在事件響應(yīng)函數(shù)中(event handler)獲取對應(yīng)的索引。但每次獲取的都是最后一次循環(huán)的索引。

原因是初學(xué)者并未理解JavaScript的閉包特性。通過element.onclick=function(){alert(i);}方式給元素添加點(diǎn)擊事件。響應(yīng)函數(shù)function(){alert(i);}中的 i 并非每次循環(huán)時(shí)對應(yīng)的 i(如0，1，2，3，4)而是循環(huán)后最后 i 的值5。 或者說循環(huán)時(shí)響應(yīng)函數(shù)內(nèi)并未能保存對應(yīng)的值 i，而是最后一次i++的值5。

了解了原因，摸索出了很多解決辦法(純粹是興趣)。最先想到的前兩種

1、將變量 i 保存給在每個(gè)段落對象(p)上

 
 
    
  
  
  1. function init1() {  
    2. 
  
  
  2.   var pAry = document.getElementsByTagName("p");   
    3. 
  
  
  3.   for( var i=0; i
  
  
  4.      pAry[i].i = i;  
    5. 
  
  
  5.      pAry[i].onclick = function() {  
    6. 
  
  
  6.         alert(this.i);   
    7. 
  
  
  7.      }  
    8. 
  
  
  8.   }  
    9. 
  
  
  9. } 
    10.

2、將變量 i 保存在匿名函數(shù)自身

 
 
    
  
  
  1. function init2() {  
    2. 
  
  
  2.   var pAry = document.getElementsByTagName("p");   
    3. 
  
  
  3.   for( var i=0; i
  
  
  4.    (pAry[i].onclick = function() {  
    5. 
  
  
  5.         alert(arguments.callee.i);  
    6. 
  
  
  6.     }).i = i;  
    7. 
  
  
  7.   }  
    8. 
  
  
  8. } 
    9.

后又想到了三種

3、加一層閉包，i 以函數(shù)參數(shù)形式傳遞給內(nèi)層函數(shù)

 
 
    
  
  
  1. function init3() {  
    2. 
  
  
  2.   var pAry = document.getElementsByTagName("p");  
    3. 
  
  
  3.   for( var i=0; i
  
  
  4.    (function(arg){  
    5. 
  
  
  5.        pAry[i].onclick = function() {  
    6. 
  
  
  6.           alert(arg);  
    7. 
  
  
  7.        };  
    8. 
  
  
  8.    })(i);//調(diào)用時(shí)參數(shù)   
    9. 
  
  
  9.   }  
    10. 
  
  
  10. } 
    11.

4、加一層閉包，i 以局部變量形式傳遞給內(nèi)層函數(shù)

 
 
    
  
  
  1. function init4() {  
    2. 
  
  
  2.   var pAry = document.getElementsByTagName("p");  
    3. 
  
  
  3.   for( var i=0; i
  
  
  4.     (function () {  
    5. 
  
  
  5.       var temp = i;//調(diào)用時(shí)局部變量   
    6. 
  
  
  6.       pAry[i].onclick = function() {  
    7. 
  
  
  7.         alert(temp);  
    8. 
  
  
  8.       }  
    9. 
  
  
  9.     })();  
    10. 
  
  
  10.   }  
    11. 
  
  
  11. } 
    12.

5、加一層閉包，返回一個(gè)函數(shù)作為響應(yīng)事件(注意與3的細(xì)微區(qū)別)

 
 
    
  
  
  1. function init5() {  
    2. 
  
  
  2.   var pAry = document.getElementsByTagName("p");  
    3. 
  
  
  3.   for( var i=0; i
  
  
  4.    pAry[i].onclick = function(arg) {  
    5. 
  
  
  5.        return function() {//返回一個(gè)函數(shù)   
    6. 
  
  
  6.        alert(arg);  
    7. 
  
  
  7.      }  
    8. 
  
  
  8.    }(i);  
    9. 
  
  
  9.   }  
    10. 
  
  
  10. } 
    11.

后又發(fā)現(xiàn)了兩種

6、用Function實(shí)現(xiàn)，實(shí)際上每產(chǎn)生一個(gè)函數(shù)實(shí)例就會(huì)產(chǎn)生一個(gè)閉包

 
 
    
  
  
  1. function init6() {  
    2. 
  
  
  2.     var pAry = document.getElementsByTagName("p");  
    3. 
  
  
  3.     for( var i=0; i
  
  
  4.       pAry[i].onclick = new Function("alert(" + i + ");");//new一次就產(chǎn)生一個(gè)函數(shù)實(shí)例  
    5. 
  
  
  5.     }  
    6. 
  
  
  6. } 
    7.

7、用Function實(shí)現(xiàn)，注意與6的區(qū)別

 
 
    
  
  
  1. function init7() {  
    2. 
  
  
  2.     var pAry = document.getElementsByTagName("p");  
    3. 
  
  
  3.     for( var i=0; i
  
  
  4.          pAry[i].onclick = Function('alert('+i+')');  
    5. 
  
  
  5.     }  
    6. 
  
  
  6. } 
    7.

網(wǎng)站題目：深入理解JavaScript的閉包特性
分享路徑：http://www.dlmjj.cn/article/coiocsg.html