Une analyse approfondie du mécanisme de fermeture de JavaScript_Connaissances de base

Les variables JavaScript peuvent être des variables locales ou des variables globales.
Les fermetures peuvent être utilisées pour les variables privées.
Variables globales
Les fonctions peuvent accéder aux variables définies dans la fonction, telles que :
Exemple

function myFunction() {
  var a = 4;
  return a * a;
}

Les fonctions peuvent également accéder à des variables définies en dehors de la fonction, telles que :
Exemple

var a = 4;
function myFunction() {
  return a * a;
}

Dans ce dernier exemple, a est une variable globale.
Les variables globales dans les pages Web appartiennent à l'objet window.
Les variables globales s'appliquent à tous les scripts de la page.
Dans le premier cas, a est une variable locale.
Les variables locales ne peuvent être utilisées que dans la fonction dans laquelle elles sont définies. Non disponible pour d'autres fonctions ou codes de script.
Même si les variables globales et locales portent le même nom, ce sont deux variables différentes. Modifier l’un d’eux n’affectera pas la valeur de l’autre.
Remarque
Si une variable est déclarée sans le mot-clé var, c'est une variable globale, même si elle est définie au sein d'une fonction.

Cycle de vie variable
La portée des variables globales est globale, c'est-à-dire que les variables globales sont partout dans l'ensemble du programme JavaScript.
Les variables déclarées dans une fonction ne fonctionnent qu'à l'intérieur de la fonction. Ces variables sont des variables locales et leur portée est locale ; les paramètres de la fonction sont également locaux et ne fonctionnent qu'à l'intérieur de la fonction.
Contre-dilemme
Imaginez que vous souhaitiez compter certaines valeurs et que le compteur est disponible dans toutes les fonctions.
Vous pouvez utiliser des variables globales, des fonctions pour régler le compteur pour qu'il incrémente :
Exemple

var counter = 0;

function add() {
  counter += 1;
}

add();
add();
add();

// 计数器现在为 3

La valeur du compteur change lorsque la fonction add() est exécutée.
Mais voici le problème, n'importe quel script sur la page peut modifier le compteur, même si la fonction add() n'est pas appelée.
Si je déclare un compteur à l'intérieur d'une fonction, la valeur du compteur ne peut pas être modifiée sans appeler la fonction :
Exemple

function add() {
  var counter = 0;
  counter += 1;
}

add();
add();
add();

// 本意是想输出 3, 但事与愿违，输出的都是 1 !

Le code ci-dessus ne s'affichera pas correctement, chaque fois que j'appelle la fonction add(), le compteur sera mis à 1.
Les fonctions JavaScript en ligne peuvent résoudre ce problème.
Fonctions intégrées JavaScript
Toutes les fonctions ont accès aux variables globales.
En fait, en JavaScript, toutes les fonctions ont accès à la portée située au-dessus d'elles.
JavaScript prend en charge les fonctions imbriquées. Les fonctions imbriquées peuvent accéder aux variables de fonction du niveau supérieur.
Dans cet exemple, la fonction inline plus() peut accéder à la variable compteur de la fonction parent :
Exemple

function add() {
  var counter = 0;
  function plus() {counter += 1;}
  plus();  
  return counter; 
}

Si nous pouvions accéder à la fonction plus() en externe, cela résoudrait le dilemme du compteur.
Nous devons également nous assurer que counter = 0 n'est exécuté qu'une seule fois.
Nous avons besoin de fermetures.
Fermeture JavaScript
Vous vous souvenez de la fonction qui s'appelle ? A quoi sert cette fonction ?
Exemple

var add = (function () {
  var counter = 0;
  return function () {return counter += 1;}
})();

add();
add();
add();

// 计数器为 3

Exemple d'analyse
La variable add spécifie la valeur du mot de retour de la fonction qui s'appelle elle-même.
Les fonctions d'appel automatique ne sont exécutées qu'une seule fois. Mettez le compteur à 0. et renvoie l'expression de la fonction.
La variable add peut être utilisée comme fonction. Ce qui est cool, c'est qu'il donne accès aux compteurs depuis la portée située au-dessus de la fonction.
C'est ce qu'on appelle une fermeture JavaScript. Cela permet aux fonctions d'avoir des variables privées.
Le compteur est protégé par la portée de la fonction anonyme et ne peut être modifié que via la méthode add.

Remarque
Une fermeture est une fonction qui peut accéder aux variables dans la portée de la fonction précédente, même si la fonction précédente a été fermée.