淺談JavaScript for循環(huán) 閉包
有個(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中0.1+0.2不等于0.3問(wèn)題
這篇文章主要介紹了解決JavaScript中0.1+0.2不等于0.3問(wèn)題,需要的朋友可以參考下2018-10-10一個(gè)css與js結(jié)合的下拉菜單支持主流瀏覽器
這是一個(gè)css和js結(jié)合的下拉菜單,經(jīng)測(cè)試支持主流瀏覽器,比較適合企業(yè)站,需要的朋友可以參考下2014-10-10JavaScript獲取中英文混合字符串長(zhǎng)度的方法示例
這篇文章主要介紹了JavaScript獲取中英文混合字符串長(zhǎng)度的方法,結(jié)合實(shí)例形式分析了javascript通過(guò)遍歷轉(zhuǎn)換字符串實(shí)現(xiàn)統(tǒng)計(jì)字符串長(zhǎng)度的操作技巧,需要的朋友可以參考下2017-02-02JavaScript實(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-12JavaScript實(shí)現(xiàn)按鍵精靈的原理分析
這篇文章主要介紹了JavaScript實(shí)現(xiàn)按鍵精靈的原理分析,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2017-02-02