Laissez-vous apprendre les fermetures JS en quelques minutes

La fermeture est un concept important en Javascript. Pour les débutants, la fermeture est un concept très abstrait, notamment la définition donnée par la spécification ECMA, il est difficile de la comprendre à partir de la définition. Cet article ne décrira donc pas longuement le concept de fermeture, mais passera directement aux informations pratiques pour que vous puissiez apprendre la fermeture en quelques minutes !

1 Fermetures en un coup d'œil

Lorsque j'entre en contact avec une nouvelle technologie, la première chose que je fais est de trouver son code de démonstration. Pour nous, regarder le code permet de mieux comprendre l’essence d’une chose que le langage naturel. En fait, les fermetures sont partout. Par exemple, les codes de base de jQuery et de zepto sont tous inclus dans une grande fermeture, je vais donc d'abord écrire la fermeture la plus simple et la plus primitive afin que vous puissiez générer des fermetures dans votre cerveau :

function A(){    function B(){
       console.log("Hello Closure!");
    }    return B;
}var C = A();
C();//Hello Closure!

C'est la fermeture la plus simple.

Après avoir eu une compréhension préliminaire, analysons brièvement en quoi il diffère des fonctions ordinaires. Le code ci-dessus est traduit en langage naturel comme suit :

(1) Définir la fonction ordinaire A

.

(2) Définir la fonction ordinaire B

dans A (3) Retourner B

dans A (4) Exécuter A et attribuer le résultat de retour de A à la variable C

(5) Exécuter C

Pour résumer ces 5 étapes en une phrase :

La fonction interne B de la fonction A est référencée par une variable c extérieure à la fonction A.

Le retraitement de cette phrase devient la définition de la fermeture :

Lorsqu'une fonction interne est référencée par une variable extérieure à sa fonction externe, elle Une fermeture se forme.

Par conséquent, lorsque vous effectuez les 5 étapes ci-dessus, une fermeture a été définie !

C'est la clôture.

2 Le but de la fermeture

Avant de comprendre la fonction de la fermeture, comprenons d'abord le mécanisme GC en Javascript :

En Javascript , si un objet n'est plus référencé, alors l'objet sera recyclé par GC, sinon l'objet sera toujours sauvegardé en mémoire.

Dans l'exemple ci-dessus, B est défini dans A, donc B dépend de A, et la variable externe C fait référence à B, donc A est indirectement référencé par C.

En d'autres termes, A ne sera pas recyclé par GC et sera toujours stocké en mémoire. Pour prouver notre raisonnement, l'exemple ci-dessus est légèrement amélioré :

function A(){    var count = 0;    function B(){
       count ++;
       console.log(count);
    }    return B;
}var C = A();
C();// 1C();// 2C();// 3

Lorsque nous devons définir certaines variables dans le module et que nous souhaitons que ces variables soient enregistrées tout le temps Lorsqu'il est en mémoire mais ne "pollue" pas les variables globales, vous pouvez utiliser des fermetures pour définir ce module.

3 Méthode d'écriture haut de gamme

La méthode d'écriture ci-dessus est en fait la méthode d'écriture la plus primitive, mais dans les applications réelles, les fermetures et les fonctions anonymes seront utilisées ensemble. Ce qui suit est une manière couramment utilisée pour écrire une fermeture :

(function(document){    var viewport;    var obj = {
        init:function(id){
           viewport = document.querySelector("#"+id);
        },
        addChild:function(child){
            viewport.appendChild(child);
        },
        removeChild:function(child){
            viewport.removeChild(child);
        }
    }
    window.jView = obj;
})(document);

La fonction de ce composant est d'initialiser un conteneur, puis vous pouvez ajouter des sous-conteneurs au conteneur ou retirer un récipient.

La fonction est très simple, mais un autre concept entre en jeu : exécuter la fonction immédiatement. Une brève compréhension suffit. Ce qu'il faut comprendre, c'est comment cette méthode d'écriture implémente la fonction de fermeture.

Le code ci-dessus peut être divisé en deux parties :

(function(){}) et (), le premier () est une expression, et cette expression elle-même est une fonction anonyme, donc ajoutez () après cette expression. fonction.

Le processus d'exécution de ce code peut donc être décomposé comme suit :

var f = function(document){    var viewport;    var obj = {
        init:function(id){
            viewport = document.querySelector("#"+id);
        },
        addChild:function(child){
            viewport.appendChild(child);
        },
        removeChild:function(child){
            viewport.removeChild(child);
        }
    }
    window.jView = obj;
};
f(document);

Il semble que l'ombre de la fermeture soit vue dans ce code, mais il y a rien dans f La valeur de retour ne semble pas remplir les conditions de fermeture Faites attention à ce code :

window.jView = obj;

obj est un objet défini dans la fonction f, et une série de. Les méthodes sont définies dans cet objet, l'exécution de window.jView = obj définit une variable jView dans l'objet global window et pointe cette variable vers l'objet obj, c'est-à-dire que la variable globale jView fait référence à obj Et la fonction dans l'objet obj fait référence. à la fenêtre variable dans la fonction f. Par conséquent, la fenêtre dans la fonction f ne sera pas recyclée par GC, et la fenêtre sera toujours enregistrée en mémoire, donc cette méthode d'écriture remplit les conditions de fermeture.

4 Résumé simple

C'est la compréhension la plus simple de la fermeture. Bien sûr, la fermeture a une compréhension plus profonde, qui est beaucoup plus complexe, vous devez comprendre le. contexte d'exécution, objet d'activation et mécanisme de fonctionnement de la portée et de la chaîne de portée de JS. Mais en tant que débutant, vous n'avez pas besoin de les comprendre pour l'instant. Une fois que vous aurez une compréhension simple, vous devrez l'utiliser dans des projets réels. Lorsque vous l'utiliserez davantage, vous aurez naturellement une compréhension plus profonde des fermetures !