在 ES5 當(dāng)中使用 for 循環(huán)都是采用 var,而在 ES6 中都是采用的 let,并且我們更推薦于 let,這是為何?
因為 var 是在 js 語言設(shè)計者 Brendan Eich 設(shè)計的一種缺陷,這種缺陷不能更改,并且作者在十年前就提出了修復(fù)此缺陷.
在進(jìn)行講解的時候,小伙伴們需要知道在 js 語言中,if 和 for 是沒有作用域的,只有 function 才擁有,var 是全局變量,let 是塊級作用域,const 是常量(不可改變的變量稱為常量);可以把 let 看做成更完美的 var
//ES5中使用for循環(huán)點(diǎn)擊事件 //bug:每次點(diǎn)擊都是最后一個點(diǎn)擊按鈕觸發(fā)點(diǎn)擊
for(var i=0;i<btns.length;i++){
btns[i].addEventListener('click',function(i){
console.log(`第${i}按鈕發(fā)生點(diǎn)擊`);
})
}
//es5中for循環(huán)使用var定義的,就相當(dāng)于定義了一個全局的i,每次循環(huán)i++都可以進(jìn)行改變i的值,
//var進(jìn)行變量提升和代碼預(yù)解析后var是在全局最前面的,es5的解決方案是采用閉包進(jìn)行解決;
//解決方案
for(var i=0;i<btns.length;i++){
( function(num){
btns[i].addEventListener('click',function(i){
console.log(`第${num}按鈕發(fā)生點(diǎn)擊`);
})
})(i);
}
//函數(shù)具有塊級作用域,把當(dāng)前每次循環(huán)的i通過閉包的方式傳遞給點(diǎn)擊事件,因為是立即執(zhí)行函數(shù),所以每次傳遞進(jìn)去執(zhí)行
//后,在開始下一輪循環(huán),直到最后點(diǎn)擊事件循環(huán)完畢,雖然是使用var定義的i,但是i在改變前點(diǎn)擊事件通過閉包的方式
//傳遞進(jìn)去并執(zhí)行,直接把當(dāng)前的i定義在當(dāng)前函數(shù)作用域內(nèi)ES6循環(huán)
for(let i=0;i<btns.length;i++){
btns[i].addEventListener('click',function(i){
console.log(`第${num}按鈕發(fā)生點(diǎn)擊`);
})
}
//let具有塊級作用域的,每次循環(huán)時進(jìn)去不會改變當(dāng)前傳遞i的值,因為每次循環(huán)都是變量提升和代碼預(yù)解析
//都是把let提升到當(dāng)前作用域的最前方
