On the problem of block-level scope

var box = document.querySelector(".box");
    for (var i = 0; i < 10; iPP) {
        var li = document.createElement("li");
        li.innerHTML = i;
        box.appendChild(li);
        li.addEventListener("click",function(){
            console.log(i);
        })
    }

this code clicks on the newly produced li tag, which is all 10. The elevation book says that the closure can only get the last value of any variable in the function. I have understood it for a long time, but I don"t understand why.
the second question is, why does setting the type of I to let show normal click? I know that let is the concept of block-level scope, so why does block-level scope display normally?
some of them have been entwined. Please explain. Thank you very much.

Mar.31,2021

1, which is actually a block-level scope issue and does not involve closures.
2, which is caused by the different scope used by var and let. The scope of the
var variable is global, while the let is the local block scope, that is, within the for loop, the
global variable is unique, and the variable I declared by var is constantly overwritten in the loop and ends up being a unique 10, so no matter which one of the li in the external call, it is 10 in the end.
while let is a local scope and will not be overwritten.


the first problem is that var does not have block-level scope. Var declares that variables have variable promotion, which is equivalent to defining an I outside the for loop, where there is a closure

.

the second problem is that let is the knowledge of ES6 and proposes a block-level scope. The variables declared by let have block-level characteristics, which has one more scope than the variables declared by var

.

subject to understand: global scope, function scope, block scope, divergence-active object, scope chain = =, can have a thorough understanding, hey

Menu