Comment les fermetures dans les boucles gèrent-elles le partage de variables et préservent-elles l'unicité ?

Démystifier les idées fausses autour des fermetures dans les boucles

Dans le domaine de la programmation, les fermetures ont attiré une attention considérable en raison de leur capacité à maintenir une référence à des variables même dans le cadre d'une boucle. Cependant, comprendre le concept peut s’avérer intimidant. Examinons une explication détaillée à l'aide d'un exemple de code simplifié et vous donnons une compréhension globale.

Considérez l'extrait de code suivant :

<code class="javascript">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);

    }
}
window.onload = addLinks;</code>

La question qui se pose est de savoir comment condenser ce code tout en préservant l'essence des fermetures. Pour résoudre ce problème, nous utiliserons une approche « usine de fonctions ».

<code class="javascript">for (var i = 0; i < 10; i++) {
    document.getElementById(i).onclick = (function (x) {
        return function () {
            alert(x);
        }
    })(i);
}</code>

Ou, pour une lisibilité accrue :

<code class="javascript">function generateMyHandler(x) {
    return function () {
        alert(x);
    }
}

for (var i = 0; i < 10; i++) {
    document.getElementById(i).onclick = generateMyHandler(i);
}</code>

Dévoilement du rôle des fermetures :

Un aspect crucial à comprendre est la nature unique des fermetures. Ils capturent non seulement la valeur d'une variable, mais englobent également la variable elle-même. Pour illustrer cela, considérons le code suivant :

<code class="javascript">var message = 'Hello!';
document.getElementById('foo').onclick = function () { alert(message) };
message = 'Goodbye!';</code>

Cliquer sur l'élément 'foo' déclenchera une boîte d'alerte affichant le message : "Au revoir !". En effet, les fermetures conservent la variable, pas seulement sa valeur.

Dans le contexte des boucles, l'utilisation d'une simple fermeture conduit au partage de variables. Le code suivant le démontre :

<code class="javascript">for (var i = 0; i < 10; i++) {
    document.getElementById('something' + i).onclick = function () { alert(i) };
}</code>

Lorsque vous cliquez sur un élément, une alerte avec le numéro 10 s'affiche car toutes les fonctions partagent la même variable. Même en modifiant i, comme indiqué avec i = "hello"; entraînera l'affichage par tous les éléments de la même alerte : "bonjour". Cela est dû à la référence partagée à la variable.

La puissance des arguments de fonction :

Pour atténuer ce partage de variable, nous exploitons les capacités des arguments de fonction en JavaScript . Lorsqu'une fonction est appelée, les arguments sont passés par référence (pour les objets) ou par valeur (pour les chaînes et les nombres). Cela nous permet de rompre le partage de variables au sein des fermetures.

Dans l'extrait de code révisé :

<code class="javascript">for (var i = 0; i < 10; i++) {
    document.getElementById(i).onclick =
        (function (x) {
            return function () {
                alert(x);
            }
        })(i)
}</code>

Nous introduisons une fonction d'usine pour générer la référence de fonction souhaitée. Cette référence capture l'argument passé à la fonction (dans ce cas, la valeur de i) et le maintient dans la fermeture, garantissant que chaque élément conserve sa valeur unique.

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!