var與let變量for遍歷的問題

var Liarry = document.getElementsByTagName('li');

/*
*方法一
*描述：自執行函數，將變量當參數傳入(閉包的思想，保存當前的值)。
*/

for (var i = 0; i < Liarry.length; i++) {
    (function (j){
    Liarry[j].addEventListener('click', function () {
        console.log(j);
    })})(i);
}


/*
*方法二
*描述：將變量值保存在當前的li對象中。
*/

for (var i = 0; i< Liarry.length; i++){
    Liarry[i].index = i
    Liarry[i].addEventListener('click', function () {
        console.log(this.index)
    })
}


/*
*方法三
*描述：定義一個時間函數，將參數傳入（本質是全局變量變爲局部變量）
*/

for (var i = 0; i < Liarry.length; i++) {
    clickEvent(i);
}

function clickEvent(j) {
    Liarry[j].addEventListener('click', function () {
        console.log(j);
    })
}


/*
*方法四
*用let聲明變量
*/

for (let i = 0; i < Liarry.length; i++){
    Liarry[i].addEventListener('click', function () {
            console.log(i);
    });
}


*闡述(我的理解，有不足的地方歡迎評論區走一波):

一、var 聲明的變量存在變量提高，var 聲明的是全局變量。當js引擎執行到for循環時，會給每個li添加一個click事件，此時並未觸發該事件，click的回調並沒執行，回調中的i並沒賦值，直到i等於length終止循環，當觸發click，回調執行，i去獲取值，此時的值被length覆蓋。

二、let 塊級做用域，不存在變量提高(js規定它聲明的變量是惟一的)。每次循環js引擎會把變量i從新聲明初始化一次，變量i的每一次賦值只做用域本次循環，因此值不同。