鍍金池/ 問(wèn)答/HTML/ 關(guān)于塊級(jí)作用域的問(wèn)題

關(guān)于塊級(jí)作用域的問(wèn)題

var box = document.querySelector('.box');
    for (var i = 0; i < 10; i++) {
        var li = document.createElement('li');
        li.innerHTML = i;
        box.appendChild(li);
        li.addEventListener('click',function(){
            console.log(i);
        })
    }

這段代碼點(diǎn)擊新生產(chǎn)的li標(biāo)簽全是10，高程書(shū)中說(shuō)，閉包只能取得包含函數(shù)中任何變量的最后一個(gè)值，我理解了很長(zhǎng)時(shí)間，不明白原委。
第二個(gè)問(wèn)題是，為什么將i的類型設(shè)置為let就是點(diǎn)擊顯示正常，我知道let是塊級(jí)作用域的概念，那為何塊級(jí)作用域就能顯示正常呢？
有些被繞里了，請(qǐng)大神解釋一下，感激不盡了。

回答
編輯回答
慢半拍

1，這其實(shí)是塊級(jí)作用域的問(wèn)題，并沒(méi)有涉及到閉包。
2，產(chǎn)生原因在于var與let使用的作用域不同。
var 變量的作用域是全局，而let 是局部的塊作用域即for循環(huán)內(nèi)，
全局變量唯一性，var 聲明的變量i在循環(huán)中被不斷覆蓋最終只是唯一的10,因此在外部調(diào)用中無(wú)論li的哪一個(gè)，最終都是10。
而let是局部的作用域，并不會(huì)被覆蓋。

2017年3月4日 18:34
編輯回答
嘟尛嘴

第一個(gè)問(wèn)題, var 不存在塊級(jí)作用域, var 聲明變量存在變量提升, 相當(dāng)于在 for 循環(huán)外面定義了一個(gè) i, 這里是存在閉包的

第二個(gè)問(wèn)題, let 是 ES6 的知識(shí), 提出了塊級(jí)作用域, let 聲明的變量具有塊級(jí)特性, 比 var 聲明的變量多了一個(gè)作用域

題主理解一下: 全局作用域, 函數(shù)作用域, 塊級(jí)作用域, 在發(fā)散一下 - 活動(dòng)對(duì)象, 作用域鏈 ==, 能有透徹的理解的, 嘿嘿

2018年2月1日 06:10
編輯回答
檸檬藍(lán)

問(wèn)題1：

`for ( var i = 0; i < 10; i++ ) {
    li.addEventListener('click',function(){
        console.log(i);        
        //10，這里由于點(diǎn)擊事件執(zhí)行是遲于for循環(huán)事件，所以只會(huì)獲取for循環(huán)的最終結(jié)果                
    })
}
console.log(i);       //10,這里說(shuō)明i實(shí)際上是全局變量
`
至于閉包，因?yàn)榫植孔饔糜蚩梢栽L問(wèn)全局作用域中的變量，所以函數(shù)中訪問(wèn)全局i才會(huì)訪問(wèn)得到。

問(wèn)題2：

也正是因?yàn)槌?huì)出現(xiàn)類似上面的那種情況，即讓人疑惑又容易污染全局變量，所以es6才會(huì)定義let和塊作用域（{}），使用了let定義后，實(shí)際上每次for循環(huán)內(nèi)相當(dāng)于每次都重新定義了i，具體的可以看es6教程。
2017年11月15日 16:10