先來(lái)看看下面這一道題吧：
//下面這段代碼的執(zhí)行結(jié)果是什么腰奋，為什么单起？
for (var i = 0; i < 3; i++) {
setTimeout(function (){
console.log(i);
})
}
//打印結(jié)果
//3
//3
//3
有一定前端基礎(chǔ)的應(yīng)該都知道結(jié)果是打印三個(gè)3，也知道這跟作用域有關(guān)劣坊，但具體是引發(fā)這個(gè)問(wèn)題的呢嘀倒。以下是我個(gè)人的理解，如有問(wèn)題局冰，歡迎指正测蘑。
首先，我們需要先搞清楚for循環(huán)具體是怎樣實(shí)現(xiàn)的：
//這是一個(gè)for循環(huán)
for (var i = 0; i < 3; i++) {
console.log(i);
}
console.log(i);
//執(zhí)行結(jié)果：
//0
//1
//2
//3
//這個(gè)for循環(huán)實(shí)際的執(zhí)行過(guò)程應(yīng)該是這樣的
{
var i=0;
console.log(i);
i++;
}
{
var i=1;
console.log(i);
i++;
}
{
var i=2;
console.log(i);
i++;
}
console.log(i);
//執(zhí)行結(jié)果：
//0
//1
//2
//3
由于var的作用域是函數(shù)作用域康二，且var可以重復(fù)聲明同名變量并覆蓋碳胳，因此在這段代碼中for循環(huán)執(zhí)行結(jié)束后，i的值任然存在沫勿，所以最終會(huì)打印3挨约。又由于就近原則味混，console.log(i)執(zhí)行時(shí)，會(huì)找當(dāng)前作用域中最近聲明的那一個(gè)i的值诫惭，因此打印0翁锡，1，2夕土，3馆衔。
正如前面所說(shuō)的那樣，var的作用域是函數(shù)作用域怨绣，且可以重復(fù)聲明角溃，了解了var的這兩個(gè)特性之后，一開(kāi)始的那個(gè)問(wèn)題也就好理解了：
for (var i = 0; i < 3; i++) {
setTimeout(function (){
console.log(i);
})
}
//執(zhí)行結(jié)果:
// 3
// 3
// 3
//這個(gè)for循環(huán)的實(shí)際執(zhí)行過(guò)程應(yīng)該是這樣的
{
// var i=0;這個(gè)i在被實(shí)際引用之前就已經(jīng)被var i=2給覆蓋了篮撑，因此聲明了也沒(méi)有實(shí)際作用
setTimeout(function (){
console.log(i);
});
i++;
}
{
// var i=1;這個(gè)i在被實(shí)際引用之前就已經(jīng)被var i=2給覆蓋了减细，因此聲明了也沒(méi)有實(shí)際作用
setTimeout(function (){
console.log(i);
});
i++;
}
{
var i=2;
setTimeout(function (){
console.log(i);
});
i++;
}
//到這里同步任務(wù)執(zhí)行完畢，i=3
//執(zhí)行結(jié)果:
// 3
// 3
// 3
上面的console.log(i)會(huì)被放入異步任務(wù)隊(duì)列中等待同步任務(wù)執(zhí)行完畢后再執(zhí)行咽扇，前面聲明的i還沒(méi)有被引用就被var i=2給覆蓋了邪财。同步任務(wù)執(zhí)行完畢后陕壹，全局的i值為3质欲，console.log(i)在塊級(jí)作用域找不到i就會(huì)去外層的作用域找，直到在該函數(shù)或全局內(nèi)找不到糠馆，于是打印的都是3嘶伟。
解決這個(gè)問(wèn)題常用的方法就是不用var，如果開(kāi)發(fā)環(huán)境有限制的話又碌，那就可以使用閉包九昧。以下是閉包的方案：
for (var i = 0; i < 3; i++) {
(function foo(m) {
setTimeout(function () {
console.log(m);
})
})(i)
}
//執(zhí)行結(jié)果:
// 0
// 1
// 2
//這個(gè)for循環(huán)的實(shí)際執(zhí)行過(guò)程應(yīng)該是這樣的
{
var i = 0;
(function foo(m) {
var i=m;
setTimeout(function () {
console.log(i);
})
})(i)
i++;
}
{
var i = 1;
(function foo(m) {
var i=m;
setTimeout(function () {
console.log(i);
})
})(i)
i++;
}
{
var i = 2;
(function foo(m) {
var i=m;
setTimeout(function () {
console.log(i);
})
})(i)
i++;
}
//執(zhí)行結(jié)果:
// 0
// 1
// 2
將每次for循環(huán)聲明的i以參數(shù)的形式傳給一個(gè)函數(shù)（foo）并執(zhí)行，當(dāng)前for循環(huán)聲明的i的值就保存在了foo函數(shù)的內(nèi)部毕匀，即便后續(xù)聲明的i把現(xiàn)在的i值覆蓋了铸鹰，也不會(huì)影響到foo內(nèi)部的i的值。
當(dāng)然皂岔，使用let和const是最簡(jiǎn)單的方法蹋笼，它們倆是塊級(jí)作用域。
