您好,登錄后才能下訂單哦!
這篇文章主要介紹了js核心基礎(chǔ)之閉包怎么用,具有一定借鑒價(jià)值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。
具體如下:
需求:有一個(gè)列表,當(dāng)點(diǎn)擊哪一行,則顯示當(dāng)前是第幾行。
html代碼:
<p>第一行</p> <p>第二行</p> <p>第三行</p>
錯(cuò)誤js代碼示范:
function addHander(nodes){ for ( var i=0;i<nodes.length;i++) { var node=nodes[i]; node.onclick=function(){ alert('當(dāng)前是第'+i+'行');//3 3 3 } } } var nodes=document.getElementsByTagName("p"); addHander( nodes);
從邏輯上來(lái)看,毫無(wú)漏洞,對(duì)不對(duì)?
但是,當(dāng)你每次點(diǎn)擊的時(shí)候,彈出的都是最后一行。
原理:當(dāng)頁(yè)面加載完成之后就調(diào)用addHandler函數(shù),為每個(gè)節(jié)點(diǎn)綁定點(diǎn)擊事件處理函數(shù),綁定的是匿名函數(shù),但是,這時(shí)候node上的匿名函數(shù)并沒有被調(diào)用,所以,當(dāng)for循環(huán)完成之后i已經(jīng)等于3了,當(dāng)你點(diǎn)擊節(jié)點(diǎn)時(shí),調(diào)用匿名函數(shù)所以彈出的就是3了。
解決方法一:
function addHandler(nodes) { function invoke(i) { return **function () { alert(i+1); }** } for (var i=0;i<nodes.length;i++){ var node=nodes[i]; node.onclick=invoke(i); } } var nodes=document.getElementsByTagName("p"); addHandler( nodes);
原理:當(dāng)addHandler函數(shù)被調(diào)用之后,節(jié)點(diǎn)同樣被綁定了點(diǎn)擊事件處理函數(shù),但是,這時(shí)后綁定的是invoke函數(shù)返回的匿名函數(shù)(function (i){ alert (i+1) }),我們可以想象一下,當(dāng)點(diǎn)擊節(jié)點(diǎn)時(shí),調(diào)用invoke函數(shù)返回的匿名函數(shù),并且將i作為參數(shù)傳過(guò)去,這時(shí)候這個(gè)I則是當(dāng)前點(diǎn)擊節(jié)點(diǎn)的索引下標(biāo),所以,彈出的應(yīng)該是i+1;
解決方法二:
function addHandler(nodes){ for ( var i=0;i<nodes.length;i++) { var node=nodes[i]; node.onclick=**function(j){ //同樣的返回的均為函數(shù),但匿名函數(shù)自調(diào)用將其激活了 return *function(){//閉包 alert(j+1); }* }(i);** } } var nodes=document.getElementsByTagName("p"); addHandler(nodes);
原理:
綁定的也是一個(gè)匿名函數(shù),但是外層的匿名函數(shù)(見粗體)自調(diào)用激活了,返回的同樣是個(gè)匿名函數(shù)(見斜體),這個(gè)匿名函數(shù)則是要等到點(diǎn)擊之后才被調(diào)用,這時(shí),彈出的同樣是當(dāng)前節(jié)點(diǎn)的索引下標(biāo)+1.
若是感覺自己已經(jīng)理解,但是又沒辦法驗(yàn)證,這里有個(gè)練習(xí)題,可以試試。
function f(){ var a=[]; for ( var i=0;i<3;i++) { a[i]=function(){ return i*2; } } return a; } var result=f(); document.write(result[0]()+result[1]()+result[2]()); //輸出為6 6 6
感謝你能夠認(rèn)真閱讀完這篇文章,希望小編分享的“js核心基礎(chǔ)之閉包怎么用”這篇文章對(duì)大家有幫助,同時(shí)也希望大家多多支持億速云,關(guān)注億速云行業(yè)資訊頻道,更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。