Pourquoi l'utilisation de fermetures résout-elle le problème de boucle et de fermeture de JavaScript ?

Le fameux problème de boucle de JavaScript résolu avec fermeture

Considérez le code suivant destiné à générer cinq liens avec des événements d'alerte uniques pour afficher leurs identifiants respectifs :

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);
    }
}

Cependant, ce code ne parvient pas à atteindre son objectif, car cliquer sur l'un des liens affiche "lien 5." Pour remédier à cela, le code modifié suivant attribue avec succès à chaque lien son identifiant unique :

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

Comprendre la magie de fermeture

La clé du succès de ce code réside dans le concept de fermetures. En JavaScript, une fermeture est une fonction qui conserve l'accès à l'environnement lexical de la fonction dans laquelle elle a été créée. En d'autres termes, elle peut accéder aux variables et arguments définis dans la fonction externe, quelle que soit sa propre portée.

Dans le premier extrait de code, la fonction interne fait référence à la variable i, qui est hissée en haut du portée de la fonction. Au fur et à mesure de l'itération de la boucle, la variable i est mise à jour et la fonction interne fait toujours référence à sa valeur la plus récente. Cela fait que tous les liens affichent « lien 5 » lorsqu'ils sont cliqués.

Dans le deuxième extrait de code, le littéral de fonction externe crée un nouvel objet fonction avec sa propre portée et sa variable locale num, dont la valeur est définie sur la valeur actuelle. valeur de i. L'objet fonction est renvoyé en tant que gestionnaire d'événements pour l'événement onclick du lien.

Essentiellement, la fonction interne est créée dans le contexte de l'environnement lexical de la fonction externe, qui inclut la variable num. Ainsi, la fonction interne a un accès continu à num et renvoie une fonction qui alerte l'ID correct lorsque le lien est cliqué.

Cette approche garantit que chaque lien a sa propre fermeture unique, qui préserve la valeur correcte de i même après la fin de la boucle.

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!