??在前端群里看見過很多人問過這個(gè)問題，今晚又有人問了這個(gè)問題，所以寫篇文章整理一下。首先看一下代碼,點(diǎn)擊li之后彈出當(dāng)前l(fā)i所對(duì)應(yīng)的索引值。于是很多人刷刷刷寫出了下面的代碼。

var?aLi?=?document.getElementsByTagName('li'); for(var?i?=?0;?i?<?aLi.length;?i++){aLi[i].onclick?=?function(){alert(i);} }

? 但是結(jié)果不盡人意，為了簡(jiǎn)單，我們約定一下頁(yè)面中有2個(gè)li。點(diǎn)擊li之后彈出的都是2。

? 我們首先來分析一下為什么結(jié)果是1.我們可以簡(jiǎn)單的將循環(huán)分成兩部。

??

i?=?0時(shí),aLi[0].onclick?=?function(){alert(i)} i?=?1時(shí),aLi[1].onclick?=?function(){alert(i)} i?=?2時(shí)，不滿足條件跳出循環(huán).

?在執(zhí)行click的函數(shù)的時(shí)候，會(huì)有一個(gè)作用域鏈，這個(gè)作用域鏈?zhǔn)且粋€(gè)對(duì)象列表，這組對(duì)象定義了代碼作用域中的變量。（ 關(guān)于變量對(duì)象的內(nèi)容想更詳細(xì)了解的可以查看變量對(duì)象。）當(dāng)我們alert(i)的時(shí)候，會(huì)去從內(nèi)到外的去尋找變量i。這個(gè)時(shí)候這個(gè)函數(shù)的作用域鏈上有兩個(gè)對(duì)象，這時(shí)循環(huán)已經(jīng)結(jié)束了，i此時(shí)的值為2.所以點(diǎn)擊任何一個(gè)li，彈出的都是2，而不是我們想要的索引值。重點(diǎn)在于彈出的是變量i，變量i，變量i。重要的事情說三遍。

?那么問題來了，我們要如何解決這個(gè)問題呢。我們需要做的就是在每次給aLi[i]綁定事件的時(shí)候，將這個(gè)時(shí)候i的值保存在內(nèi)部的作用域中。解決方案如下。

?

var?aLi?=?document.getElementsByTagName('li');for?(var?i?=?0;?i?<?aLi.length;?i++)?{(function(i){aLi[i].onclick?=?function?()?{alert(i);};})(i) }這里涉及到一個(gè)塊級(jí)作用域的概念。在es6出來前，函數(shù)是作為創(chuàng)建塊級(jí)作用域的主要手段。這里我們通過在aLi[i].onclick外面套上一層函數(shù)，將i作為參數(shù)，我們重新分析一下結(jié)果。i?=?0時(shí),(function(i){aLi[0].onclick?=?function(){alert(i);}})(0)i?=?1時(shí),(function(i){aLi[1].onclick?=?function(){alert(i);}})(1)i?=?2時(shí)，不滿足條件跳出循環(huán).

由于多了一層自執(zhí)行函數(shù)的包裹，當(dāng)我們點(diǎn)擊li時(shí)，會(huì)有三層的作用域，從內(nèi)帶外分別是：click函數(shù)內(nèi)部的變量對(duì)象，自執(zhí)行函數(shù)的變量對(duì)象和最外層的window對(duì)象。查找到第二層的時(shí)候，找到了i，自執(zhí)行函數(shù)的i等于傳入的參數(shù)值，相對(duì)應(yīng)的存下了當(dāng)時(shí)i的值，所以就彈出了相應(yīng)的索引值。

轉(zhuǎn)載于:https://blog.51cto.com/f2emrwu/1731520

總結(jié)

以上是生活随笔為你收集整理的js常见问题之为什么点击弹出的i总是最后一个的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。