Exemple de code de fermeture JavaScript facile à comprendre

La fermeture est un concept propre à JavaScript. Pour les débutants, la fermeture est un concept particulièrement abstrait, notamment la définition donnée par la spécification ECMA, sans expérience pratique. comprenez-le à 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 Clôture – la première expérience de l'amour

Quand j'entre en contact avec une nouvelle technologie, la première chose que je fais est : la chercher démo code. Pour les codeurs, le code peut parfois mieux comprendre quelque chose que le langage naturel. En fait, les fermetures sont partout. Par exemple, les principaux codes de jQuery et de zepto sont tous inclus dans une grande fermeture. J'écrirai donc ci-dessous la démo de 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 de l'histoire. Cela ne peut pas être plus simple. Si c'est plus simple, ce n'est plus une fermeture !

Après avoir eu une compréhension préliminaire, analysons brièvement en quoi elle diffère des fonctions ordinaires, afin que nous puissions la reconnaître d'un coup d'œil parmi la « foule immense ».

Le code ci-dessus est traduit en langage naturel comme suit :

(1) définit une fonction ordinaire A

(2) définit une fonction ordinaire B

(3) Renvoie B dans A (pour être précis, renvoie une référence à B dans A)

(4) Exécute A() et attribue le résultat de retour de A à la variable c

(5) Exécuter c()

Pour résumer ces 5 étapes de fonctionnement en une phrase absurde :

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

Retraitez cette absurdité et cela devient la définition de la fermeture :

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

Ne vous embêtez pas à vous souvenir de cette définition. Le but de vous donner cette définition est de vous faire comprendre que les 5 étapes ci-dessus visent à élaborer la définition de la fermeture.

Par conséquent, lorsque vous effectuez les 5 étapes ci-dessus, vous avez déjà défini une fermeture !

C'est la clôture.

2 Le rôle de la fermeture

Avant de comprendre le rôle de la fermeture, comprenons d'abord le mécanisme GC en javascript : En javascript, si un objet n'est plus référencé, alors cet objet Il le sera recyclé par GC, sinon cet objet sera toujours stocké 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, c'est-à-dire que A ne sera pas recyclé par GC , sera toujours sauvegardé 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();// 1
c();// 2
c();// 3

count est une variable dans A et sa valeur est modifiée dans B , à chaque fois que la fonction B est exécuté, la valeur de count augmentera de 1 en fonction de la valeur d'origine. Par conséquent, le décompte dans A est toujours conservé en mémoire.

C'est le rôle de la fermeture. Parfois on a besoin de définir une telle variable dans un module : on espère que cette variable sera toujours sauvegardée en mémoire mais ne "polluera" pas la variable globale. nous pouvons utiliser des fermetures pour définir ce module.

3 méthodes d'écriture haut de gamme

La méthode d'écriture ci-dessus est en fait la méthode d'écriture la plus simple et la plus primitive, mais dans les applications réelles, personne ne le fait de cette façon, en particulier dans certains grands frameworks JS . Écrire. La raison pour laquelle je vous parle de cette façon d’écrire est que moins il y a de distractions, plus il est facile de se concentrer sur une chose. Ci-dessous, j'utilise la méthode d'écriture couramment utilisée pour écrire un composant de démonstration simple :

(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 de l'ajouter au conteneur Ajoutez des sous-conteneurs et supprimez un conteneur. La fonction est très simple, mais un autre concept entre ici en jeu : exécuter la fonction immédiatement. Comprenez-le simplement brièvement. L'essentiel est de comprendre comment cette méthode d'écriture implémente la fonction de fermeture.

La structure de code ci-dessus peut être divisée en deux parties : (function(){})() La partie rouge est une expression, et cette expression elle-même est une fonction anonyme, donc ajouter (après cette expression) signifie exécuter cette fonction anonyme.

Le processus d'exécution de ce code peut donc se décomposer 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 visible dans ce code , mais il n'y a pas de valeur de retour dans f, et il semble qu'il ne remplisse pas les conditions de fermeture :

window.jView = obj;

obj est défini dans f Un objet, cet objet définit une série de méthodes. Exécuter window.jView = obj signifie définir une variable jView dans l'objet global window et pointer cette variable vers l'objet obj, c'est-à-dire la variable globale à laquelle jView fait référence. vers obj.Et dans l'objet obj La fonction fait également référence à la variable viewport dans f, donc la viewport dans f ne sera pas recyclée par GC et sera 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 des fermetures. Bien sûr, les fermetures ont une compréhension plus profonde, qui est plus impliquée. Vous devez comprendre l'environnement d'exécution de JS (contexte d'exécution), les objets actifs. (objets d'appel) et les mécanismes de fonctionnement des portées et des chaînes de portées. Mais en tant que débutant, vous n'avez pas besoin de les comprendre pour le moment. Après avoir une compréhension simple, vous devez l'utiliser dans des projets réels. Lorsque vous l'utiliserez davantage, vous aurez naturellement une compréhension plus profonde des fermetures !

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!