FAQ JS : Pourquoi le i qui apparaît lorsque vous cliquez dessus est-il toujours le dernier conseil one_javascript

J'ai vu beaucoup de gens poser cette question dans le groupe front-end, et quelqu'un a encore posé cette question ce soir, alors j'ai écrit un article pour faire le tri. Tout d’abord, jetez un œil au code. Après avoir cliqué sur li, la valeur d’index correspondant au li actuel apparaîtra. Tant de personnes ont écrit le code suivant.

var aLi = document.getElementsByTagName('li');
for(var i = 0; i < aLi.length; i++){
  aLi[i].onclick = function(){
    alert(i);
  }
}

Mais le résultat n'est pas satisfaisant. Par souci de simplicité, nous sommes d'accord qu'il y a 2 li dans la page. Après avoir cliqué sur li, toutes les pop-ups sont au nombre de 2.
Analysons d’abord pourquoi le résultat est 1. On peut simplement diviser la boucle en deux parties.

i = 0时,aLi[0].onclick = function(){alert(i)}
i = 1时,aLi[1].onclick = function(){alert(i)}
i = 2时，不满足条件跳出循环.

Lors de l'exécution de la fonction click, il y aura une chaîne de portée. Cette chaîne de portée est une liste d'objets. Ce groupe d'objets définit les variables dans la portée du code. (Si vous souhaitez en savoir plus sur le contenu de l'objet variable, vous pouvez visualiser l'objet variable.) Lorsque nous alertons (i), nous chercherons la variable i de l'intérieur vers l'extérieur. À ce moment, il y a deux objets sur la chaîne de portée de cette fonction. À ce moment, la boucle est terminée et la valeur de i à ce moment est 2. Ainsi, lorsque vous cliquez sur n'importe quel li, la fenêtre contextuelle s'affichera. 2, pas la valeur d'index que nous voulons. Le fait est que ce qui apparaît est la variable i, la variable i, la variable i. Dites les choses importantes trois fois.

Alors voici la question : comment résoudre ce problème. Ce que nous devons faire est de sauvegarder la valeur de i dans la portée interne chaque fois que nous lions un événement à aLi[i]. La solution est la suivante.

var aLi = document.getElementsByTagName('li');
for (var i = 0; i < aLi.length; i++) {
 (function(i){
   aLi[i].onclick = function () {
      alert(i);
     };
 })(i)
}

Cela implique le concept de portée au niveau du bloc. Avant la sortie d'ES6, les fonctions étaient le principal moyen de créer des étendues au niveau des blocs. Ici, nous mettons une couche de fonction en dehors de aLi[i].onclick, en utilisant i comme paramètre, et réanalysons les résultats.

 i = 0时,
  (function(i){
   aLi[0].onclick = function(){
     alert(i);
   }
  })(0)
  i = 1时,
  (function(i){
   aLi[1].onclick = function(){
     alert(i);
   }
  })(1)
  i = 2时，不满足条件跳出循环.

En raison de la couche supplémentaire d'encapsulation de fonctions auto-exécutables, lorsque nous cliquons sur li, il y aura trois niveaux de portée de l'intérieur vers l'extérieur, ce sont : l'objet variable à l'intérieur de la fonction de clic, l'objet variable de. la fonction auto-exécutable et la portée la plus externe de la couche. Lors de la recherche du deuxième niveau, j'ai été trouvé. Le i de la fonction auto-exécutable était égal à la valeur du paramètre transmis, et la valeur de i à ce moment-là a été enregistrée en conséquence, de sorte que la valeur d'index correspondante est apparue.

Permettez-moi de partager avec vous un problème js courant. En cliquant sur li, vous pouvez afficher l'index li actuel et la fonction innerHTML

Cliquer sur l'un d'entre eux entraînera l'alerte suivante :

Selon notre réflexion habituelle, le code devrait être écrit ainsi :

var myul = document.getElementsByTagName("ul")[0];
  var list = myul.getElementsByTagName("li");
 
  function foo(){
    for(var i = 0, len = list.length; i < len; i++){
      list[i].onclick = function(){
        alert(i + "----" + this.innerHTML);
      }
    }
  }
  foo();

Mais malheureusement, le résultat est comme ceci :

Pourquoi l'index est-il toujours 4 ? Cela est dû au manque de portée au niveau du bloc dans js. Voici trois solutions

1. Utiliser des fermetures

<script type="text/javascript">
var myul = document.getElementsByTagName("ul")[0];
var list = myul.getElementsByTagName("li");
function foo(){
  for(var i = 0, len = list.length; i < len; i++){
    var that = list[i];
    list[i].onclick = (function(k){
      var info = that.innerHTML;
      return function(){
        alert(k + "----" + info);
      };
    })(i);
  }
}
foo();
</script>

2. Utilisez la nouvelle fonctionnalité let dans ES6 pour déclarer des variables

Les variables déclarées avec let auront une portée au niveau du bloc, ce qui répond évidemment aux exigences. Cependant, il convient de noter que vous devez ajouter 'use strict' (utiliser le mode strict) pour que cela prenne effet

<script type="text/javascript">
var myul = document.getElementsByTagName("ul")[0];
var list = myul.getElementsByTagName("li");
function foo(){'use strict'
  for(let i = 0, len = list.length; i < len; i++){
    list[i].onclick = function(){
      alert(i + "----" + this.innerHTML);
    }
  }
}
foo();
</script>

3. Introduisez jquery et utilisez-le ou déléguez pour la liaison d'événements (ils ont tous les caractéristiques d'un proxy d'événement)

<script type="text/javascript" src="jquery-1.8.2.min.js"></script>

<script type="text/javascript">
$("ul").delegate("li", "click", function(){
  var index = $(this).index();
  var info = $(this).html();
  alert(index + "----" + info);
});
</script>
<script type="text/javascript">
$("ul").on("click", "li", function(){
  var index = $(this).index();
  var info = $(this).html();
  alert(index + "----" + info);
});
</script>