javascript - Concernant les variables déclarées par let, comment ça marche dans ce code?

Question

Un morceau de code utilisé pour améliorer l'affichage est le suivant :

for(var i=0;i<aLi.length;i++){
    var oldColor=null;
    aLi[i].onmouseover=function(){
        oldColor=this.style.backgroundColor;
        this.style.backgroundColor="#ccc";
    }
    aLi[i].onmouseout=function(){
        this.style.backgroundColor=oldColor;
    }
}

Ici this.style ne peut pas être remplacé par aLi[i].style, car i a déjà terminé le cycle
Mais si la valeur de i est déclarée avec let, elle est complètement différente, et la valeur de i peut aussi être précise ; appelé dans la fonction événement :

for(let i=0;i<aLi.length;i++){
    var oldColor=null;
    aLi[i].onmouseover=function(){
        oldColor=this.style.backgroundColor;
        consol.log(i);
        aLi[i].style.backgroundColor="#ccc";
    }
    aLi[i].onmouseout=function(){
        this.style.backgroundColor=oldColor;
    }
}

Lorsque la fonction événementielle est déclenchée, cela ne devrait-il pas être une erreur que je ne puisse pas être trouvé ? Pourquoi peut-il fonctionner avec succès

Answer 1

ES6 ajoute une nouvelle commande let pour déclarer des variables. Son utilisation est similaire à var, mais la variable déclarée n'est valide que dans le bloc de code où se trouve la commande let.

    {
      let a = 10;
      var b = 1;
    }
    a // ReferenceError: a is not defined.
    b // 1

Le code ci-dessus se trouve dans le bloc de code et déclare deux variables en utilisant respectivement let et var. Ensuite, ces deux variables sont appelées en dehors du bloc de code. En conséquence, la variable déclarée par let signale une erreur et la variable déclarée par var renvoie la valeur correcte. Cela montre que la variable déclarée par let n'est valide que dans le bloc de code dans lequel elle se trouve.

Pour le compteur de la boucle, il est très approprié d'utiliser la commande let.

for (let i = 0; i < 10; i++) {
  // ...
}

console.log(i);
// ReferenceError: i is not defined

Dans le code ci-dessus, le compteur i n'est valide que dans le corps de la boucle for, et une erreur sera signalée s'il est référencé en dehors de la boucle.

Si le code suivant utilise var, le résultat final est 10.

var a = [];
for (var i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6](); // 10

Dans le code ci-dessus, la variable i est déclarée par la commande var et est valide dans la portée globale, il n'y a donc qu'une seule variable i globalement. Chaque fois que la boucle boucle, la valeur de la variable i changera et le console.log(i) à l'intérieur de la fonction affectée au tableau a dans la boucle pointe vers le i global. En d'autres termes, tous les i dans les membres du tableau a pointent vers le même i, provoquant la sortie du dernier tour de i au moment de l'exécution, qui est 10.

Si vous utilisez let, la variable déclarée n'est valide que dans la portée au niveau du bloc et le résultat final est 6.

var a = [];
for (let i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6](); // 6

Dans le code ci-dessus, la variable i est déclarée par let. Le i actuel n'est valide que dans ce cycle, donc i dans chaque cycle est en fait une nouvelle variable, donc la sortie finale est 6. Vous vous demandez peut-être, si la variable i est redéclarée à chaque cycle de la boucle, comment connaît-elle la valeur du cycle précédent et calcule ainsi la valeur du cycle en cours ? En effet, le moteur JavaScript mémorisera en interne la valeur du cycle précédent, et lors de l'initialisation de la variable i de ce cycle, les calculs seront effectués sur la base du cycle précédent.

De plus, une autre particularité de la boucle for est que la partie qui définit la variable de boucle est une portée parent et que l'intérieur du corps de la boucle est une portée enfant distincte.

for (let i = 0; i < 3; i++) {
  let i = 'abc';
  console.log(i);
}
// abc
// abc
// abc

Le code ci-dessus fonctionne correctement et affiche abc 3 fois. Cela indique que la variable i à l'intérieur de la fonction et la variable de boucle i ne sont pas dans la même portée, mais ont des portées distinctes.