Analyse caractéristique de la fermeture JS

Dans la balise body, ajoutez une balise u avec le nœud id, et il y a 5 balises li sous la balise ul. Comment faire apparaître l'indice li en cliquant sur différentes balises li ?
1) Vous devez d'abord obtenir le nœud ul var node = document.getElementsById('node')
2) Obtenez le nœud enfant sous le nœud node var list = node.children
**3) Ajoutez onclick à l'événement de boucle du nœud enfant (notez ici qu'il y aura des problèmes de fermeture). for（var i=0;i< list.length; i++){
list[i].onclick = function()console.log(i)}}, à partir des résultats imprimés, on constate qu'à chaque fois la sortie est 7. **
4) Sortie d'analyse 7, car i est déclaré comme variable globale à l'aide de var, pointant vers la même adresse. Une fois la boucle exécutée, la valeur de i est 7, donc le résultat imprimé dans chaque boucle est 7
Utilisez deux façons de le résoudre, 1) déclarez les variables de portée au niveau du bloc et utilisez let j = i à chaque fois que i est passé, prends le relais.

let j = i; 
list[i].onclick = function(){console.log(j)}

Dans la méthode fonction, la variable j au niveau du bloc est appelée et cette variable ne sera pas récupérée. Chaque boucle for pointe vers une adresse différente, donc lorsque l'événement click est déclenché, son indice peut être imprimé correctement 2) Utilisez des fermetures pour résoudre le problème.

list[i].onclick = function(i){ 
return function(){console.log(i)}。 
}

**Interprétation des fermetures
Une fermeture est une fonction qui peut lire les variables internes d'autres fonctions. Dans le langage JavaScript, seules les sous-fonctions à l'intérieur d'une fonction peuvent lire les variables locales. Les fermetures peuvent être simplement comprises comme des « fonctions définies à l'intérieur d'une fonction ». Essentiellement, une fermeture est un pont reliant l’intérieur d’une fonction à l’extérieur de la fonction.

Remarque : l'utilisation de fermetures entraînera l'enregistrement des variables de la fonction en mémoire, ce qui consomme beaucoup de mémoire. Par conséquent, les fermetures ne peuvent pas être utilisées de manière abusive, ce qui entraînera des problèmes de performances sur la page Web et peut entraîner des problèmes de mémoire. problèmes dans les navigateurs IE. . La solution finale consiste à supprimer toutes les variables locales inutilisées avant de quitter la fonction.

Utilisez les exemples d’autres personnes. Pour votre référence

var name = "this window";
var object = {
    name :"my object",
    getNameFunc:function () {
        return function () {
            return this.name;
        }
    }
}
alert(object.getNameFunc()());/弹出this window2 。此时this对象指向window对象
var object2 = {
    name: "my object",
    getNameFunc2: function () {
        var that = th is;
        return function () {
            return that.name;
        }
    }
}
alert(‘that’+object2.getNameFunc2()()); ///弹出my object。此时this对象指向object2对象

Recommandations associées :

Une compréhension simple des fermetures JS

Explication détaillée des formes courantes de fermetures JS

Exemple de partage de code d'utilisation de la fermeture JS

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!