Pourquoi les boucles JavaScript créent-elles un comportement inattendu lors de la liaison des gestionnaires d'événements ?

Comprendre le fameux problème de boucle JavaScript

En JavaScript, un problème courant survient lors de l'utilisation d'une boucle pour générer des éléments et les lier à des gestionnaires d'événements . Le code suivant illustre ce problème :

function addLinks() {
    for (var i=0, link; i<5; i++) {
        link = document.createElement("a");
        link.innerHTML = "Link " + i;
        link.onclick = function () {
            alert(i);
        };
        document.body.appendChild(link);
    }
}

Ce code est destiné à générer 5 liens, chacun affichant son propre index lors d'un clic. Cependant, lorsque vous cliquez dessus, tous les liens afficheront « lien 5 ». Cette anomalie provient du mécanisme de fermeture en JavaScript.

Dans le premier extrait, la fonction interne définie dans le gestionnaire d'événements de la boucle maintient une référence à la variable i. Cependant, une fois la boucle terminée, i prend la valeur 5. Par conséquent, lorsque les gestionnaires d'événements invoquent alert(i), la valeur de i est toujours 5, ce qui entraîne un comportement incorrect.

Dans le deuxième code extrait de code, ce problème est résolu en enfermant la fonction interne dans une expression de fonction immédiatement invoquée (IIFE) :

link.onclick = function (num) {
    return function () {
        alert(num);
    };
}(i);

L'IIFE garantit qu'une nouvelle instance de la fonction interne est créée pour chaque itération, préservant ainsi la valeur souhaitée de i dans sa portée. Lorsque le gestionnaire d'événements s'exécute, il alerte l'index correct en utilisant la valeur capturée de i à partir de l'IIFE.

Alternativement, une approche plus efficace consiste à attribuer la valeur actuelle de i directement à une propriété du nœud DOM, permettant un accès facile lors de l'exécution du gestionnaire d'événements :

link.i = i;
link.onclick = function () {
    alert(this.i);
};

Cette solution élimine le besoin de créer de nouveaux objets fonction pour chaque lien.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!