Comment les fonctions de fermeture JavaScript accèdent aux variables externes_conseils javascript

Une fermeture fait référence à une fonction qui a le droit d'accéder aux variables dans la portée d'une autre fonction. Cependant, il y a une chose à noter concernant le mécanisme de configuration de la portée, c'est-à-dire que la fermeture ne peut obtenir que la dernière valeur de n'importe quelle. variable dans la fonction contenant.

Comme le cas suivant :

function create(){
    var arr = new Array();  
 
    for (var i=0; i<10; i++){
        arr[i] = function(){
            return i;
        };  
    }
 
    return arr;
}
 
var c_arr = create();
 
for(var i=0; i<c_arr.length;i++){
    document.write("c_arr["+i+"] = "+c_arr[i]()+"<br />");    
}

Résultat de l'exécution :

En apparence, il semble que la valeur i renvoyée par chaque fonction soit différente. Par exemple, la valeur de c_arr[0] devrait être 0, la valeur de c_arr[1] devrait être 1, et ainsi de suite. En conséquence, chaque fonction renvoie 10. Pourquoi?

Étant donné que l'objet actif de la fonction create() est stocké dans la chaîne de portée de chaque fonction, ils font tous référence à la même variable i. Lorsque la boucle for se termine, la valeur de i devient 10. À ce stade, chaque fonction fait référence au même objet variable qui contient la variable i.

On peut forcer la fermeture à se comporter comme prévu en créant une autre fonction de nom de domaine afin que chaque position corresponde à la valeur correspondante.

function create(){
    var arr = new Array();  
 
    for (var i=0; i<10; i++){
        arr[i] = function(num){
            return function(){
                return num; 
            };
        }(i);   
    }
 
    return arr;
}
 
var c_arr = create();
 
for(var i=0; i<c_arr.length;i++){
    document.write("c_arr["+i+"] = "+c_arr[i]()+"<br />");    
}

Résultat de l'exécution :

Une fonction anonyme est définie et le mécanisme d'exécution de la fonction anonyme est immédiatement attribué au tableau. La fonction anonyme a ici un paramètre num, qui est la valeur à renvoyer par la fonction finale. Nous passons la variable i lors de l'appel de chaque fonction. Puisque les paramètres de fonction sont transmis par valeur, la valeur actuelle de la variable i sera affectée au paramètre num. À l'intérieur de cette fonction anonyme, une fermeture qui accède à num est créée et renvoyée. De cette façon, chaque fonction du tableau arr possède une copie de sa propre variable num, elle peut donc renvoyer des valeurs différentes.

Exemple classique

Regardons à nouveau un exemple classique. Supposons que la page comporte un ensemble de balises de bouton. Nous utilisons un script pour lier les événements de clic à cet ensemble de balises de bouton, et lorsque vous cliquez dessus, quel nombre de balises apparaîtront.

<meta charset="utf-8" />
 
<button>第一个</button>
<button>第二个</button>
<button>第三个</button>
<button>第四个</button>
 
 
<script type="text/javascript">
 
var obj = document.getElementsByTagName('button');
for(var i=0;i<obj.length;i++){
    obj[i].onclick = function(){
        alert(i);
    };  
}
 
</script>

Cliquez sur chaque bouton résultat

En apparence, il semble que cliquer sur chaque étiquette devrait faire apparaître un numéro différent

Le premier devrait apparaître avec 0 ;

Le deuxième devrait apparaître avec 1 ;

Et ainsi de suite.

Mais le résultat est que tous les boutons apparaissent 4, ce qui n'est évidemment pas le résultat que nous souhaitons.

Changeons de programme

<meta charset="utf-8" />
 
<button>第一个</button>
<button>第二个</button>
<button>第三个</button>
<button>第四个</button>
 
 
<script type="text/javascript">
 
var obj = document.getElementsByTagName('button');
for(var i=0;i<obj.length;i++){
    obj[i].onclick = function(num){
        return function(){
            alert(num);
        }       
    }(i);       
}
 
</script>

Cliquez sur le deuxième

Cliquez sur le quatrième

Il suffit de créer une fonction anonyme au sein de la fonction, comme dans le cas ci-dessus. Vous pouvez implémenter une fonction anonyme pour capturer la variable externe i. Par conséquent, la valeur i de chaque bombe bouton est différente.