Une brève discussion sur les fermetures dans les compétences js

Une brève discussion sur les fermetures dans les compétences js_javascript

WBOY

Libérer： 2016-05-16 16:09:21

original

1194 Les gens l'ont consulté

Tout d'abord, regardons un morceau de code :

Copier le code Le code est le suivant :

111
222
333
var a=document.getElementsByTagName("a");
fonction b(){
　　for(var i=0;i 　　a[i].onclick=function(){
alerte(i);
　　}　
}
>

Selon l'intention originale de notre conception, cliquer sur une balise a devrait faire apparaître le numéro de série de la balise en conséquence, c'est-à-dire que cliquer sur le premier a fera apparaître 0, cliquer sur le second a fera apparaître 1 ... Mais en fait, c'est toujours le numéro d'un tag. Quelle est la raison ? Ce problème me préoccupe depuis longtemps. J'ai consulté de nombreuses informations et ouvrages de référence en ligne, et la plupart d'entre eux sont spécieux. Je pense que de nombreux étudiants ne comprennent pas les raisons pour lesquelles je vais parler de ma propre compréhension de ce problème. . S'il y a un caractère inapproprié, veuillez me critiquer et me corriger.

D'après ma compréhension personnelle, la raison pour laquelle la fonction ci-dessus ne parvient pas à atteindre son objectif est que la fonction de traitement d'événements est liée à la variable i et que la fonction de traitement d'événements est affectée à onclick, ce qui signifie qu'elle n'est activée que lorsque la balise a est cliquée. Cette fonction sera appelée, donc logiquement, la fonction(){alert(i);} dans une simple boucle for n'est en fait pas exécutée, et lorsque nous cliquons sur l'étiquette a, la boucle for est déjà activée. Une fois l'exécution terminée, la valeur de i à ce moment est la valeur finale de la boucle for. Une compréhension simple est que la valeur de i appartient à la fonction b et que la valeur de i dont nous avons besoin est la valeur transmise à la fonction de traitement d'événements en temps réel. Alors, existe-t-il un moyen de réaliser notre intention de conception originale ? Les étudiants intelligents ont peut-être deviné qu’il s’agissait d’utiliser des fermetures.

Regardons un autre morceau de code :

Copier le code Le code est le suivant :

var a=document.getElementsByTagName("a");

fonction b(){

　　for(var i=0;i
　　　a[i].onclick=function(j){

　　　　fonction de retour(){

alerte(j);

　　　}

　　}(je);

﻿}

>

b();

En exécutant le code ci-dessus, vous pouvez constater que la fonction souhaitée a été implémentée, c'est-à-dire qu'en cliquant sur n'importe quelle étiquette, le numéro de série où se trouve l'étiquette apparaîtra. Concernant le code ci-dessus, je pense que de nombreux étudiants ont vu de nombreuses versions similaires, mais pourquoi pouvons-nous obtenir les fonctions dont nous avons besoin en faisant cela ? C'est juste mon opinion personnelle. S'il y a quelque chose qui ne va pas, n'hésitez pas à m'éclairer.

L'essence de la compréhension du code ci-dessus est la compréhension de la variable i. Dans ce code, la fonction s'exécute dans la boucle for et trouve une fonction immédiatement appelée. À ce moment, la valeur de la variable i en temps réel est transmise à la fonction immédiatement appelée. La fonction de traitement d'événements est également stockée. la valeur de la variable i en temps réel.

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à tout le monde pour comprendre les fermetures js.