昨天考核同學js的時候問到了這個問題，結果自己忘了還有一些條件，結果當場翻車，。。。。后來試了幾次，才發現問題所在。。想想就好笑，治學要嚴謹啊，馬虎不得。
直接看代碼

<script>
 for (let i = 0; i < 4; i++) {
        console.log(i);
    }
 //結果為 0 1 2 3    
    for (var i = 0; i < 4; i++) {
        console.log(i);
    }
    console.log(i);
//結果為0 1 2 3
</script>

然后我們嘗試在html中加點代碼
我們在ul中創建四個li,為方便觀看，將ul的背景顏色設置為紅色

<ul style="background-color: red;width: 100px">ul
          <li>li1</li>
          <li>li2</li>
          <li>li3</li>
          <li>li4</li>
      </ul>

然后我們再使用兩個for循環打印每個li標簽

var lis=document.querySelectorAll('li'); //獲取所有li標簽
    for (let i = 0; i < 4; i++) {   //let循環打印
        console.log(lis[i]);
    }
    for (var i = 0; i < 4; i++) {   //var循環打印
        console.log(lis[i]);
    }

通過控制臺，我們可以看到兩個循環都成功打印出每個li標簽，確實沒什么毛病，嗯。
然后我們在此基礎上為兩個循環遍歷得到的li標簽分別添加不同的效果，奇跡發生了，不要眨眼睛啊

// for 循環使用let 添加點擊事件，改變每個li標簽的顏色為藍色
 var lis=document.querySelectorAll('li');
    for (let i = 0; i < 4; i++) {
        // console.log(lis[i]);
       lis[i].addEventListener('click',function (){
           lis[i].style.color='blue';
       })
    }

結果如我們所料

然后再使用for循環var

//for循環使用var為每個li添加綁定事件，改變顏色為綠色
for (var i = 0; i < 4; i++) {
        // console.log(lis[i]);
        lis[i].addEventListener('click',function (){
            // console.log(i);
            // console.log(this);
            lis[i].style.color='gerrrn';
        })
    }

結果是我們無論怎么點擊就是觸發不了我們的預期效果，之前我們明明使用for循環中的var選取到了每個li標簽，為什么就是沒效果呢，而且還報錯。

原來這其中還牽涉到同步異步的思想
當執行上下文到for循環中，會把for循環放到同步執行棧中，執行for循環，然后把for循環中的內部點擊事件放到異步方法里面。等到同步任務，也就是for循環執行完之后再執行里面的點擊事件。
我們可以在點擊事件后把i打印出來

 for (var i = 0; i < 4; i++) {
        // console.log(lis[i]);
        lis[i].addEventListener('click',function (){
            console.log(i);//4
            lis[i].style.color='orange';
        })
    }
    console.log(i)=4;

我們可以看到每次點擊都會打印出i的值為4，數組lis的長度為4，數組最大索引為3，所以找不到lis[4]。
為什么i是4？因為for循環最后一次循環i=3又執行了一步i++的操作，所以為4.

為了防止出現這種難以預期的意外，我們可以把lis[i]改為this，因為this在這里指的是點擊的對象。

```html
 for (var i = 0; i < 4; i++) {
        // console.log(lis[i]);
        lis[i].addEventListener('click',function (){
            console.log(i);//4
            console.log(this);
            this.style.color='orange';
            //lis[i].style.color='orange';
        })
    }
    console.log(i)=4;

關于同步異步的理解可以參考鏈接