[JavaScript] Comprendre les fermetures en quelques secondes

Bien que les fermetures soient une idée fondamentale en JavaScript, les nouveaux arrivants peuvent les trouver vagues et difficiles à comprendre. Plus précisément, la définition de la norme ECMA peut être difficile à comprendre sans aucune expérience du monde réel. Par conséquent, plutôt que d'expliquer en détail la notion de fermeture dans cet article, nous allons vous faciliter la compréhension en utilisant le code réel.

1. Clôture

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

C'est la fermeture la plus simple.

Maintenant que nous connaissons les principes fondamentaux, examinons brièvement en quoi cela diffère d'une fonction typique. Voici comment le code susmentionné apparaît lorsqu'il est traduit en langage naturel :

1. Définir une fonction normale A, avec le nom de l'argument
2. Définissez une fonction régulière B dans A, et dans B, référez-vous au nom de la variable externe
3. Retourner B dans A
4. Exécuter A et affecter le résultat à la variable C
5. Exécuter C

Une seule déclaration peut résumer ces cinq opérations :

La fonction B à l'intérieur de la fonction A et le nom de la variable sont référencés par la variable C à l'extérieur de la fonction A.

Avec une petite modification, cette déclaration définit une fermeture comme suit :

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

Par conséquent, effectuer les cinq opérations ci-dessus définit une fermeture.

Utilisations des fermetures

Avant de comprendre les utilisations des fermetures, comprenons le mécanisme GC (Garbage Collection) de JavaScript.

En JavaScript, lorsqu'un objet n'est plus référencé, il sera récupéré par le GC, sinon, il continuera à être conservé en mémoire.

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

C'est-à-dire que A ne sera pas collecté par le GC et continuera à être conservé en mémoire. Pour prouver ce raisonnement, améliorons légèrement l'exemple ci-dessus.

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

1. Si nous appelons var C = A();, A est exécuté, créant une variable de comptage et une fonction interne B. Puisque A renvoie B, la variable C a en fait une référence à B. La fonction B peut alors accéder au compter la variable dans A.
2. La fonction B peut accéder à la variable count dans A car B est une fermeture. En effet, B est une fermeture et les fermetures préservent le contexte dans lequel elles sont créées (par exemple, les variables locales).
3. Lorsque C() est appelé, il appelle en fait la fonction B. Chaque fois que C() est appelé, B incrémente la valeur de count et affiche cette valeur sur la console.
4. Le contexte d'exécution de A se termine lorsque B est créé, mais les variables locales de A ne sont pas récupérées tant que B fait référence à ses variables locales (telles que count).
5. Ce n'est que lorsque B n'est plus référencé que la variable de comptage et les autres variables locales de A seront récupérées. Dans cet exemple, puisque C fait toujours référence à B, la valeur de count n'est pas récupérée, ni le contexte d'exécution de A.

Pourquoi le décompte n'est-il pas réinitialisé ?

Mécanisme de fermeture :

• La fermeture conserve l'état de count et le garde accessible à la fonction interne B. Même si le contexte d'exécution de A se termine, l'état de count reste en mémoire car B continue de faire référence à cet état.
• À chaque appel à B : Chaque appel à C() est en fait un appel à B(), qui utilise le décompte stocké dans la fermeture et ne le réinitialise pas.

Ainsi, si vous définissez certaines variables dans un module et que vous souhaitez garder ces variables en mémoire mais ne pas « polluer » les variables globales, vous pouvez définir ce module à l'aide de 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!