欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間:2016年06月22日 08:53:35   投稿:jingxian  
下面小編就為大家?guī)?lái)一篇淺談JavaScript for循環(huán) 閉包。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

有個(gè)網(wǎng)友問(wèn)了個(gè)問(wèn)題,如下的html,為什么每次輸出都是5,而不是點(diǎn)擊每個(gè)p,就alert出對(duì)應(yīng)的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>產(chǎn)品一</p>   
<p>產(chǎn)品二</p>   
<p>產(chǎn)品三</p>   
<p>產(chǎn)品四</p>   
<p>產(chǎn)品五</p>   
</body>   
</html>  

解決方式有以下幾種

1、將變量 i 保存給在每個(gè)段落對(duì)象(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ù)形式傳遞給內(nèi)層函數(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);//調(diào)用時(shí)參數(shù)   
 }   
}   

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

function init4() {   
 var pAry = document.getElementsByTagName("p");   
 for( var i=0; i<pAry.length; i++ ) {    
  (function () {   
   var temp = i;//調(diào)用時(shí)局部變量   
   pAry[i].onclick = function() {    
    alert(temp);    
   }   
  })();   
 }   
}   

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

function init5() {   
 var pAry = document.getElementsByTagName("p");   
 for( var i=0; i<pAry.length; i++ ) {    
  pAry[i].onclick = function(arg) {   
    return function() {//返回一個(gè)函數(shù)   
    alert(arg);   
   }   
  }(i);   
 }   
}  

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

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

7、用Function實(shí)現(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ī)?lái)的淺談JavaScript for循環(huán) 閉包全部?jī)?nèi)容了,希望大家多多支持腳本之家~

相關(guān)文章

  • Javascript數(shù)組與字典用法分析

    Javascript數(shù)組與字典用法分析

    這篇文章主要介紹了Javascript數(shù)組與字典用法,以實(shí)例形式較為詳細(xì)的分析了Array作為數(shù)組與字典的不同用法,具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2014-12-12
  • 解決JavaScript中0.1+0.2不等于0.3問(wèn)題

    解決JavaScript中0.1+0.2不等于0.3問(wèn)題

    這篇文章主要介紹了解決JavaScript中0.1+0.2不等于0.3問(wèn)題,需要的朋友可以參考下
    2018-10-10
  • 微信小程序?qū)崿F(xiàn)皮膚功能(夜間模式)

    微信小程序?qū)崿F(xiàn)皮膚功能(夜間模式)

    這篇文章主要給大家介紹了關(guān)于利用微信小程序?qū)崿F(xiàn)皮膚功能,也就是實(shí)現(xiàn)夜間模式的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來(lái)一起看看吧。
    2017-06-06
  • prototype框架中美元符號(hào)$用法分析

    prototype框架中美元符號(hào)$用法分析

    這篇文章主要介紹了prototype框架中美元符號(hào)$用法,結(jié)合實(shí)例形式較為詳細(xì)的分析了$符號(hào)的使用技巧與相關(guān)注意事項(xiàng),需要的朋友可以參考下
    2016-01-01
  • JS煙花背景效果實(shí)現(xiàn)方法

    JS煙花背景效果實(shí)現(xiàn)方法

    這篇文章主要介紹了JS煙花背景效果實(shí)現(xiàn)方法,實(shí)例分析了javascript操作dom元素實(shí)現(xiàn)煙花特效的技巧,需要的朋友可以參考下
    2015-03-03
  • JavaScript中的數(shù)組操作介紹

    JavaScript中的數(shù)組操作介紹

    這篇文章主要介紹了JavaScript中的數(shù)組操作介紹,本文講解了join()、reverse()、sort()、concat()、slice()、splice()等幾個(gè)函數(shù)的操作實(shí)例,需要的朋友可以參考下
    2014-12-12
  • 一個(gè)css與js結(jié)合的下拉菜單支持主流瀏覽器

    一個(gè)css與js結(jié)合的下拉菜單支持主流瀏覽器

    這是一個(gè)css和js結(jié)合的下拉菜單,經(jīng)測(cè)試支持主流瀏覽器,比較適合企業(yè)站,需要的朋友可以參考下
    2014-10-10
  • JavaScript獲取中英文混合字符串長(zhǎng)度的方法示例

    JavaScript獲取中英文混合字符串長(zhǎng)度的方法示例

    這篇文章主要介紹了JavaScript獲取中英文混合字符串長(zhǎng)度的方法,結(jié)合實(shí)例形式分析了javascript通過(guò)遍歷轉(zhuǎn)換字符串實(shí)現(xiàn)統(tǒng)計(jì)字符串長(zhǎng)度的操作技巧,需要的朋友可以參考下
    2017-02-02
  • JavaScript實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)的5種方法總結(jié)

    JavaScript實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)的5種方法總結(jié)

    在前臺(tái)開(kāi)發(fā)中會(huì)涉及頁(yè)面跳轉(zhuǎn)的問(wèn)題,下面這篇文章主要給大家總結(jié)介紹了關(guān)于JavaScript實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)的5種方法,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2023-12-12
  • JavaScript實(shí)現(xiàn)按鍵精靈的原理分析

    JavaScript實(shí)現(xiàn)按鍵精靈的原理分析

    這篇文章主要介紹了JavaScript實(shí)現(xiàn)按鍵精靈的原理分析,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下
    2017-02-02

最新評(píng)論