首頁猿問為什么點(diǎn)擊都打印出6，而不是0，1...

為什么點(diǎn)擊都打印出6，而不是0，1，2，3，4，5 閉包的問題？

JavaScript

DIEA 2019-03-07 14:15:52

<ul> <li>選項(xiàng)1</li> <li>選項(xiàng)2</li> <li>選項(xiàng)3</li> <li>選項(xiàng)4</li> <li>選項(xiàng)5</li> <li>選項(xiàng)6</li></ul> <style> li{ border: 1px solid; }</style></body><script> var items = document.querySelectorAll("li"); for(var i = 0; i<items.length;i++){ items[i].onclick = function(){ console.log(i) } }

查看完整描述

11 回答

GCT1015

TA貢獻(xiàn)1827條經(jīng)驗(yàn) 獲得超4個(gè)贊

es6:

var items = document.querySelectorAll("li");

for(let i = 0; i<items.length;i++){

items[i].onclick = function(){

console.log(i)

}

es5:

var items = document.querySelectorAll("li");

for(var i = 0; i<items.length;i++){

(function(i){

items[i].onclick = function(){

console.log(i)

}

})(i)

}

for循環(huán)直接就運(yùn)行了跑了6次，等你點(diǎn)擊的時(shí)候i已經(jīng)等于5

反對回復(fù) 2019-03-22

慕勒3428872

TA貢獻(xiàn)1848條經(jīng)驗(yàn) 獲得超6個(gè)贊

那for循環(huán)進(jìn)行的時(shí)候，是怎么運(yùn)行的呢？
i=0時(shí)，是console.log(0) 嗎還是console.log(i)?

for 循環(huán)在你一打開，或者瀏覽器一編譯的時(shí)候，已經(jīng)運(yùn)行了。由于你沒點(diǎn)擊，于是沒有觸發(fā) console.log(i);
i 是全局的 i; 是 for()里面的i；所以點(diǎn)擊 item[i]會(huì)打印出循環(huán)6次結(jié)束的 i.

反對回復(fù) 2019-03-22

慕尼黑5688855

TA貢獻(xiàn)1848條經(jīng)驗(yàn) 獲得超2個(gè)贊

var items;

var i;

items = document.querySelectorAll("li");

for(i = 0; i<items.length;i++){

items[i].onclick = function(){

console.log(i)

}

這樣拆開，其實(shí)都一樣的，for循環(huán)是沒有作用域的，var定義的變量會(huì)提升到外面。這樣最后i就是6，你點(diǎn)擊的時(shí)候輸出就是6.

反對回復(fù) 2019-03-22

呼如林

TA貢獻(xiàn)1798條經(jīng)驗(yàn) 獲得超3個(gè)贊

var items = document.querySelectorAll("li");

for (var i = 0; i < items.length; i++) {

items[i].onclick = function () {

console.log(i)//永遠(yuǎn)是6

console.log($(this).index())//打印當(dāng)前點(diǎn)擊的元素的索引

}

反對回復(fù) 2019-03-22

largeQ

TA貢獻(xiàn)2039條經(jīng)驗(yàn) 獲得超8個(gè)贊

var items = document.querySelectorAll("li");

for(var i = 0; i<items.length;i++){

items[i].index=i;

items[i].onclick = function(){

console.log(this.index)

}

不是閉包，for循環(huán)又不等你點(diǎn)擊的時(shí)候才循環(huán)，當(dāng)然都是最后一個(gè)

反對回復(fù) 2019-03-22

拉丁的傳說

TA貢獻(xiàn)1789條經(jīng)驗(yàn) 獲得超8個(gè)贊

在你點(diǎn)擊的時(shí)候，已經(jīng)運(yùn)行結(jié)束了，你需要點(diǎn)擊之后將你要打印的變量保存下來（也就是先獲取相對應(yīng)的i的元素），再進(jìn)行輸出

反對回復(fù) 2019-03-22

陪伴而非守候

TA貢獻(xiàn)1757條經(jīng)驗(yàn) 獲得超8個(gè)贊

最簡單的,把 var 改成塊級作用域.

for(let i = 0; i<items.length;i++){

items[i].onclick = function(){

console.log(i)

}

反對回復(fù) 2019-03-22

呼喚遠(yuǎn)方

TA貢獻(xiàn)1856條經(jīng)驗(yàn) 獲得超11個(gè)贊

這就是循環(huán)的，不是閉包，使用let 或者點(diǎn)擊的時(shí)候通過$(this).index()

反對回復(fù) 2019-03-22

慕容3067478

TA貢獻(xiàn)1773條經(jīng)驗(yàn) 獲得超3個(gè)贊

兄弟你是循環(huán)綁定事件，當(dāng)你循環(huán)結(jié)束了并未觸發(fā)任何事件，但是循環(huán)結(jié)束了，所以每個(gè)事件綁定上的都是最后一次循環(huán)的數(shù)值。事件會(huì)等到你觸發(fā)事件了再繼續(xù)執(zhí)行function內(nèi)容，而for循環(huán)可不會(huì)等你~

反對回復(fù) 2019-03-22

慕田峪4524236

TA貢獻(xiàn)1875條經(jīng)驗(yàn) 獲得超5個(gè)贊

這個(gè)涉及到j(luò)s作用域以及js的運(yùn)行機(jī)制。你把這些基礎(chǔ)知識(shí)弄明白了，就不會(huì)感覺奇怪了。
在es6之前是沒有塊級作用域的概念的，只有全局作用域和函數(shù)作用域，所以這里有兩種作用域，click回調(diào)的函數(shù)作用域，全局作用域(for循環(huán)不會(huì)產(chǎn)生塊級作用域)，也就是說i屬于全局作用域。click回調(diào)里面調(diào)用了i值，但里面并沒有定義，這個(gè)變量就叫做自由變量，js對自由變量取值的邏輯是會(huì)沿著作用域鏈向上尋找，直到找到值，或找不到值為止，當(dāng)你點(diǎn)擊觸發(fā)回調(diào)的時(shí)候，函數(shù)作用域內(nèi)沒有該變量就會(huì)向上尋找，即全局作用域，此時(shí)全局作用域中的i值已經(jīng)為6了(這一點(diǎn)看明白，很重要)。所以你log數(shù)出來的每次都是6。

反對回復(fù) 2019-03-22

11 回答
0 關(guān)注
662 瀏覽

關(guān)注

添加回答

舉報(bào)

0/150

提交

取消

第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

熱搜

最近搜索清空

為什么點(diǎn)擊都打印出6，而不是0，1，2，3，4，5 閉包的問題？

為什么點(diǎn)擊都打印出6，而不是0，1，2，3，4，5 閉包的問題？

11 回答

添加回答

為什么點(diǎn)擊都打印出6，而不是0，1，2，3，4，5 閉包的問題？

為什么點(diǎn)擊都打印出6，而不是0，1，2，3，4，5 閉包的問題？