這篇文章主要介紹了js核心基礎(chǔ)之閉包怎么用,具有一定借鑒價(jià)值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。
成都創(chuàng)新互聯(lián)不只是一家網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司;我們對(duì)營(yíng)銷、技術(shù)、服務(wù)都有自己獨(dú)特見(jiàn)解,公司采取“創(chuàng)意+綜合+營(yíng)銷”一體化的方式為您提供更專業(yè)的服務(wù)!我們經(jīng)歷的每一步也許不一定是最完美的,但每一步都有值得深思的意義。我們珍視每一份信任,關(guān)注我們的網(wǎng)站建設(shè)、成都做網(wǎng)站質(zhì)量和服務(wù)品質(zhì),在得到用戶滿意的同時(shí),也能得到同行業(yè)的專業(yè)認(rèn)可,能夠?yàn)樾袠I(yè)創(chuàng)新發(fā)展助力。未來(lái)將繼續(xù)專注于技術(shù)創(chuàng)新,服務(wù)升級(jí),滿足企業(yè)一站式營(yíng)銷型網(wǎng)站需求,讓再小的成都品牌網(wǎng)站建設(shè)也能產(chǎn)生價(jià)值!
具體如下:
需求:有一個(gè)列表,當(dāng)點(diǎn)擊哪一行,則顯示當(dāng)前是第幾行。
html代碼:
第一行
第二行
第三行
錯(cuò)誤js代碼示范:
function addHander(nodes){ for ( var i=0;i從邏輯上來(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ù)并沒(méi)有被調(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原理:當(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原理:
綁定的也是一個(gè)匿名函數(shù),但是外層的匿名函數(shù)(見(jiàn)粗體)自調(diào)用激活了,返回的同樣是個(gè)匿名函數(shù)(見(jiàn)斜體),這個(gè)匿名函數(shù)則是要等到點(diǎn)擊之后才被調(diào)用,這時(shí),彈出的同樣是當(dāng)前節(jié)點(diǎn)的索引下標(biāo)+1.
若是感覺(jué)自己已經(jīng)理解,但是又沒(méi)辦法驗(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í)也希望大家多多支持創(chuàng)新互聯(lián),關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道,更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!
當(dāng)前標(biāo)題:js核心基礎(chǔ)之閉包怎么用
瀏覽路徑:http://weahome.cn/article/jjpghh.html