Comment accéder à une variable externe dans une boucle de fermeture JavaScript ?

Accès à une variable extérieure dans une boucle à partir de la fermeture JavaScript

En JavaScript, lors d'une itération sur un tableau à l'aide d'une boucle for, il est courant de rencontrer un problème où la valeur d'une variable à l'intérieur de la boucle est toujours la même que celle de la dernière itération. Cela est dû à la portée et aux fermetures variables.

Pour résoudre ce problème, une technique appelée fermetures peut être utilisée. Une fermeture est une fonction qui renvoie une fonction, qui capture la portée variable de la fonction parent.

Considérons l'exemple suivant :

<code class="javascript">for (var i in this.items) {
    var item = this.items[i];
    $("#showcasenav").append("<li id=\"showcasebutton_" + item.id + "\"><img src=\"/images/showcase/icon-" + item.id + ".png\" /></li>");
    $("#showcasebutton_" + item.id).click(function() {
        alert(item.id);
        self.switchto(item.id);
    });
}</code>

Dans ce code, l'élément variable change à chaque fois itération de la boucle. Lorsque le gestionnaire de clics est invoqué, il utilise la dernière valeur de item.

Pour résoudre ce problème, nous pouvons utiliser une fermeture pour capturer la portée de la variable de boucle :

<code class="javascript">for (var i in this.items) {
    var item = this.items[i];
    $("#showcasenav").append("<li id=\"showcasebutton_" + item.id + "\"><img src=\"/images/showcase/icon-" + item.id + ".png\" /></li>");
    $("#showcasebutton_" + item.id).click(
        // create an anonymous function that will scope "item"
        (function(item) {
            // that returns our function
            return function() {
                alert(item.id);
                self.switchto(item.id);
            };
        })(item) // immediately call it with "item"
    );
}</code>

Ici, nous enveloppons la fonction de gestionnaire de clics dans une autre fonction qui capture la portée de l'élément pendant l'itération de la boucle. Lorsque le gestionnaire de clics est invoqué, il utilise la valeur correcte de l'élément.

Une approche alternative consiste à utiliser la fonction $.each() de jQuery, qui récupère automatiquement la variable de boucle, éliminant ainsi le besoin d'une fermeture :

<code class="javascript">$.each(this.items, function(i, item) {
    $("#showcasenav").append("<li id=\"showcasebutton_" + item.id + "\"><img src=\"/images/showcase/icon-" + item.id + ".png\" /></li>");
    $("#showcasebutton_" + item.id).click(function() {
        alert(item.id);
        self.switchto(item.id);
    });
});</code>

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!