Exemple d'utilisation de la fermeture Javascript Compétences Analysis_Javascript

Cet article analyse le concept et l'utilisation des fermetures Javascript avec des exemples. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :

En ce qui concerne les fermetures, tout le monde doit en avoir entendu parler. Voici ma simple compréhension.
Pour être honnête, il n'existe pas beaucoup de scénarios dans lesquels les fermetures sont réellement écrites manuellement dans le travail quotidien, mais les frameworks et composants tiers utilisés dans le projet utilisent plus ou moins les fermetures.
Il est donc essentiel de comprendre les fermetures. Haha...

1. Qu'est-ce que la fermeture

En bref, c'est une fonction qui peut lire les variables internes d'autres fonctions.
En raison des caractéristiques de la portée des variables JS, les variables internes ne sont pas accessibles de l'extérieur, mais les variables externes sont accessibles de l'intérieur.

2. Scénarios d'utilisation

1. Implémentez les membres privés.
2. Protégez l'espace de noms et évitez de polluer les variables globales.
3. Mettre en cache les variables.

Regardons d'abord un exemple d'encapsulation :

Copier le code Le code est le suivant :

var person = function() {
//La portée de la variable est à l'intérieur de la fonction et n'est pas accessible de l'extérieur
var nom = "par défaut";

revenir {
          getName : function () {
              renvoyer le nom ;
},
setName : fonction (nouveauNom) {
              nom = nouveauNom;
>
>
}();

console.log(person.name); // Accès direct, le résultat est : undefined
console.log(person.getName()); // Le résultat est : par défaut
console.log(person.setName("langjt"));
console.log(person.getName()); // Le résultat est : langjt

Regardez les fermetures couramment utilisées dans les boucles pour résoudre le problème du référencement de variables externes :

Copier le code Le code est le suivant :

var aLi = document.getElementsByTagName('li');
pour (var i=0, len=aLi.length; i aLi[i].onclick = function() {
alert(i); // Quel que soit l'élément

sur lequel vous cliquez, la valeur qui apparaît est len, indiquant que la valeur de i ici est la même que la valeur de i imprimée après for.
};
>

Après avoir utilisé la fermeture :

Copier le code Le code est le suivant :

var aLi = document.getElementsByTagName('li');
pour (var i=0, len=aLi.length; i aLi[i].onclick = (function(i) {
Fonction de retour() {
alert(i); // Cliquez sur l'élément

à ce moment-là, et l'indice correspondant apparaîtra.
>
})(i);
>

3. Précautions

1. Fuite de mémoire

Étant donné que les fermetures entraînent le stockage de toutes les variables de la fonction en mémoire, ce qui consomme beaucoup de mémoire, les fermetures ne peuvent pas être abusées, sinon cela entraînerait des problèmes de performances sur la page Web.
Par exemple :

Copier le code Le code est le suivant :

function foo() {
var oDiv = document.getElementById('J_DIV');
var id = oDiv.id;
oDiv.onclick = function() {
// alert(oDiv.id); Il y a une référence circulaire ici, et oDiv est toujours en mémoire après la fermeture de la page de la version basse d'IE. Mettez donc en cache les types primitifs au lieu des objets autant que possible.
​​ alerte(id);
};
oDiv = nul;
>

2. Dénomination des variables

Si le nom de variable de la fonction interne et le nom de variable de la fonction externe sont les mêmes, alors la fonction interne ne peut plus pointer vers la variable portant le même nom de la fonction externe.
Par exemple :

Copier le code Le code est le suivant :

function foo(num) {
fonction de retour (num) {
console.log(num);
>
>
var f = nouveau foo(9);
f(); // non défini

其實上面的用法，專業術語叫函數柯里化(Currying)，就是把接受多個參數的函數變換成接受一個單一參數（最初函數的第一個參數）的函數，並且返回接受餘下的參數而且傳回結果的新函數的技術。本質上也利用了閉包可以快取的特性，例如：

複製程式碼 程式碼如下:

var adder = function(num) {
    return function(y) {
        return num y;
    };
};

var inc = adder(1);
var dec = adder(-1);
//inc, dec現在是兩個新的函數,作用是將傳入的參數值 ( /‐)1
alert(inc(99));//100
alert(dec(101));//100
alert(adder(100)(2));//102
alert(adder(2)(100));//102

再例如阿里玉伯的seaJS源碼中：

複製程式碼 程式碼如下:

/**
 * util-lang.js - 最小的語言增強
 */
function isType(type) {
  return function(obj) {
    return {}.toString.call(obj) == "[object " type "]"
  }
}

var isObject = isType("Object");
var isString = isType("String");

希望本文所述對大家的javascript程式設計有所幫助。