JavaScript——for循環中使用var、let定義變量的區別

for 語句用於創建一個循環，它包含了三個可選的表達式，這三個表達式被包圍在圓括號之中，使用分號分隔。

 

for(){}，整體是一個塊級作用域。

 

使用以下代碼舉例：

for(var i = 1;i<=3;i++){
　　setTimeout(function(){
　　　　console.log('for——var',i);
　　},1000)
}

此時會產生兩塊作用域，

第一層：for循環

第二層：定時器，每隔一秒執行一次

 

使用var的情況:

var是全局聲明變量，

定時器內打印 變量 i，此時會訪問父級作用域 for循環或者全局中的 i

  

畫一張圖方便理解，

當 i =4的時候，全局中的 i 已經自增為4了， 雖然該條件下的定時器函數不會執行，但是定時器函數可以訪問到全局的變量 i 

所以此時會輸出 4

 

使用let的情況:

當 i 自增為4，定時器不會執行，

所以此時會輸出1、2、3

 

---

 

demo

用var聲明變量之后，手寫塊級作用域

for(var i = 1;i<=3;i++){
             (function(str){
                    setTimeout(function(){
                        console.log('str',str);
             },1000)
　　})(i)
}

1. 新增一個立即執行函數，產生了函數作用域

2. 每次循環，傳遞一個 i 參數進來，計時器函數可以訪問到立即執行函數里面的 i 參數