Cet article analyse le concept et l'utilisation des fermetures JavaScript. Partagez-le pour votre référence. Les détails sont les suivants:
En ce qui concerne les fermetures, je crois que tout le monde en a entendu parler. Permettez-moi de vous dire ma simple compréhension ci-dessous.
Pour être honnête, il n'y a pas beaucoup de scénarios pour écrire des fermetures manuellement dans le travail quotidien, mais les frameworks et composants tiers utilisés dans le projet utilisent plus ou moins de fermetures.
Par conséquent, il est très nécessaire de comprendre les fermetures. hehe ...
1. Qu'est-ce qu'une fermeture
En bref, c'est une fonction qui peut lire des variables à l'intérieur d'autres fonctions.
En raison de la portée des variables JS, les variables internes ne sont pas accessibles à l'extérieur et les variables externes peuvent être externes.
2. Utilisez des scénarios
1. Mettre en œuvre des membres privés.
2. Protéger les espaces de noms pour éviter de polluer les variables globales.
3. Variables de cache.
Regardons d'abord un exemple d'encapsulation:
Copiez le code comme suit: var personne = fonction () {
// La portée de la variable est à l'intérieur de la fonction et n'est pas accessible à l'extérieur
var name = "Default";
retour {
getName: function () {
nom de retour;
},
setName: function (newname) {
name = newname;
}
}
} ();
console.log (personne.Name); // Accès direct, le résultat est: indéfini
console.log (personne.getName ()); // Le résultat est: par défaut
console.log (personne.setName ("Langjt"));
console.log (personne.getName ()); // Le résultat est: Langjt
Examinons les fermetures communes dans les boucles pour résoudre le problème de référence à des variables externes:
La copie de code est la suivante: var ali = document.getElementsByTagName ('li');
pour (var i = 0, len = ali.length; i <len; i ++) {
ali [i] .onclick = function () {
alerte (i); // Quel que soit l'élément sur lequel vous cliquez, la valeur pop-up est Len, indiquant que la valeur de I ici et la valeur de I imprimée après sont les mêmes.
};
}
Après avoir utilisé la fermeture:
La copie de code est la suivante: var ali = document.getElementsByTagName ('li');
pour (var i = 0, len = ali.length; i <len; i ++) {
Ali [i] .onclick = (fonction (i) {
return function () {
alerte (i); // Cliquez sur l'élément <li> à l'heure actuelle et l'indice correspondant apparaîtra.
}
})(je);
}
3. Choses à noter
1. Fuite de mémoire
Étant donné que les fermetures entraîneront le stockage de toutes les variables de la fonction en mémoire et que la consommation de mémoire est très importante, les fermetures ne peuvent pas être abusées, sinon elle entraînera des problèmes de performances de la page Web.
Par exemple:
Copiez le code comme suit: fonction foo () {
var odiv = document.getElementById ('j_div');
var id = odiv.id;
odiv.onclick = function () {
// alerte (odiv.id); Il y a une référence circulaire ici. ODIV est toujours en mémoire après la fermeture de la page de la version basse IE. Donc, cachez les types primitifs au lieu d'objets autant que possible.
alerte (id);
};
odiv = null;
}
2. NAMING VARIABLE
Si la variable de la fonction interne et le nom de variable de la fonction externe sont les mêmes, la fonction intérieure ne peut plus pointer vers la variable avec le même nom que la fonction extérieure.
Par exemple:
Copiez le code comme suit: fonction foo (num) {
return function (num) {
console.log (num);
}
}
var f = new foo (9);
f (); // indéfini
En fait, l'utilisation ci-dessus est appelée le curry de fonction, qui est la technique de convertissement d'une fonction qui accepte plusieurs paramètres en une fonction qui accepte un paramètre unique (le premier paramètre de la fonction d'origine), et renvoyant une nouvelle fonction qui accepte les paramètres restants et renvoie le résultat. En substance, il utilise également des fonctionnalités que les fermetures peuvent être mises en cache, telles que:
Copiez le code comme suit: var adder = function (num) {
return function (y) {
retour num + y;
};
};
var inc = ajouter (1);
var dec = add (-1);
// inc, DEC est désormais deux nouvelles fonctions, qui sont utilisées pour passer dans la valeur du paramètre (+ /) 1
alerte (inc (99)); // 100
alerte (déc (101)); // 100
alerte (additionneur (100) (2)); // 102
alerte (additionneur (2) (100)); // 102
Par exemple, dans le code source Seajs d'Alibaba Yubo:
Copiez le code comme suit: / **
* util-lang.js - l'amélioration minimale du langage
* /
fonction isType (type) {
return function (obj) {
return {} .toString.call (obj) == "[objet" + type + "]"
}
}
var isObject = istype ("objet");
var isstring = istype ("string");
J'espère que cet article sera utile à la programmation JavaScript de tous.