Tout d'abord, regardons un morceau de code:
La copie de code est la suivante:
<a href = "javascript: void (0);"> 111 </a>
<a href = "javascript: void (0);"> 222 </a>
<a href = "javacsript: void (0);"> 333 </a>
var a = document.getElementsByTagName ("a");
fonction b () {
pour (var i = 0; i <a.length; i ++) {
a [i] .onclick = function () {
alerte (i);
}
}
}
Selon notre intention d'origine de conception, il devrait être de cliquer sur une balise A pour faire apparaître le numéro de série correspondant de la balise, c'est-à-dire sur le premier A pour faire apparaître 0, et cliquez sur le second pour apparaître 1 ... mais le fait est que le nombre de balises A a toujours fait apparaître est toujours le nombre de balises a. Quelle est la raison? Ce problème m'a troublé depuis longtemps. J'ai consulté de nombreux documents en ligne et livres de référence. La plupart d'entre eux sont plausibles. Je crois que de nombreux étudiants ne savent pas grand-chose sur les raisons. Je parlerai de ma compréhension de ce problème. S'il y a une inappropriation, veuillez me critiquer et me corriger.
Dans ma compréhension personnelle, la raison pour laquelle la fonction ci-dessus n'a pas réussi à atteindre son objectif est que la fonction de traitement des événements lie la variable I, et la fonction de traitement des événements est attribuée à onClick, c'est-à-dire que la fonction ne sera appelée que lorsque la balise A est cliquée. Par conséquent, logiquement parlant, la fonction () {alert (i);} dans une boucle simple pour la boucle n'est pas réellement exécutée, et lorsque nous cliquons sur la balise A, la boucle For a déjà été exécutée. À l'heure actuelle, la valeur de i est la valeur finale de l'exécution de la boucle pour. Pour être simple, la valeur de I appartient à la fonction B, et la valeur de i dont nous avons besoin est la valeur transmise dans la fonction de traitement d'événement en temps réel. Y a-t-il donc un moyen de réaliser notre intention de conception originale? Un camarade de classe intelligent a peut-être deviné qu'il s'agit d'utiliser des fermetures.
Regardons un autre code:
La copie de code est la suivante:
var a = document.getElementsByTagName ("a");
fonction b () {
pour (var i = 0; i <a.length; i ++) {
a [i] .onclick = fonction (j) {
return function () {
alerte (j);
}
}(je);
}
}
b ();
Exécutez le code ci-dessus et vous constaterez que la fonction que nous voulons a été implémentée, c'est-à-dire en cliquant sur n'importe quelle balise A apparaîtra le numéro de série où se trouve la balise. Je crois que de nombreux étudiants ont vu de nombreuses versions similaires du code ci-dessus, mais pourquoi pouvons-nous atteindre les fonctions dont nous avons besoin en faisant cela? C'est mon opinion personnelle. S'il y a une inappropriation, veuillez me donner quelques conseils.
L'essence de la compréhension du code ci-dessus est la compréhension de la variable i. Dans ce code, lorsque la fonction est exécutée et que la boucle FOR est trouvée, une fonction d'appel immédiate est trouvée. Pour le moment, la valeur de variable I en temps réel est transmise à la fonction d'appel immédiate. La fonction est appelée immédiatement et la fonction de traitement d'événement stocke la valeur de variable I en temps réel.
Ce qui précède concerne cet article. J'espère que cela sera utile à la compréhension de tous les fermetures JS.