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