Fermetures: Ligne par ligne Explication de "JavaScript: Good Parts" Exemple?

Tout est question de fermetures. Dans le premier exemple, "i" sera égal à "nœuds.length" pour chaque gestionnaire d'événements de clic, car il utilise "i" de la boucle qui crée les gestionnaires d'événements. Au moment où le gestionnaire d'événements est appelé, la boucle sera terminée, de sorte que "je" sera égale à "nœuds.length".

Dans le deuxième exemple, "I" est un paramètre (donc une variable locale). Les gestionnaires d'événements utiliseront la valeur de la variable locale "I" (le paramètre).

Cela a à voir avec la fermeture.

Lorsque vous faites la chose dans le mauvais exemple,

Lorsque vous cliquez sur chaque nœud, vous obtiendrez la dernière valeur I (c'est-à-dire que vous avez 3 nœuds, quel que soit le nœud que vous cliquez sur vous obtiendrez 2). Puisque votre alerte (i) est liée à une référence de variable I et non de la valeur de i au moment où elle était liée au gestionnaire d'événements.

Faire le meilleur exemple, vous l'avez lié à ce que je fais au moment où il a été itéré sur, alors cliquez sur le nœud 1 vous donnera 0, le nœud 2 vous donnera 1 et le noeud 3 vous donnera 2.

Fondamentalement, vous évaluez ce que je suis immédiatement quand il est appelé à la ligne} (i) et il est passé au paramètre e qui tient maintenant la valeur de ce que je suis à ce moment-là.

BTW ... Je pense qu'il y a une faute de frappe dans la meilleure partie d'exemple ... il devrait être alerte (E) au lieu d'alerte (i).

Dans les deux exemples, tout nœud qui est passé a un gestionnaire d'événements onclick lié à celui-ci (juste comme code>, qui est mauvais pratique après tout).

La différence est que dans le mauvais exemple, chaque fermeture (les fonctions du gestionnaire d'événements, c'est-à-dire) fait référence exacte à la variable exacte code> i code> en raison de leur portée parentale ordinaire. p>

Le bon exemple utilise une fonction anonyme qui est exécutée tout de suite. Cette fonction anonyme références exactement la même variable code> i code> comme dans le mauvais exemple, mais comme il est exécuté et fourni avec i code> comme premier paramètre, i code> La valeur de s est attribuée à une variable locale appelée ... hein? ... i code>, exactement - écrase donc celui défini dans la portée du parent. p>

Réécritons le bon exemple pour le faire clairement: P>

var add_the_handlers = function (nodes) {
    var i;
    for (i = 0; i < nodes.length; i += 1) {
        nodes[i].onclick = function (newvar) {
            return function (e) {
                alert(nevar);
            };
        }(i);
    }
};

Je pense que c'est une source de confusion très courante pour les nouveaux arrivants à JavaScript. D'abord, je suggérerais de vérifier l'article suivant Mozilla Dev Article de brève introduction sur le thème des fermetures et de la scorage lexical:

• Mozilla Dev Centre: Utilisation de fermetures li> ul>

  Commençons par le mauvais: p>

  function makeOnClickCallback (x) {
     return function (e) {
        alert(x);
     };
  }
  
  for (i = 0; i < nodes.length; i += 1) {
     nodes[i].onclick = makeOnClickCallback(i);
  }