Comprendre et utiliser les fermetures JavaScript

Les fermetures JavaScript jouent un rôle important dans les variables globales et les variables locales. Cet article expliquera leurs connaissances associées.

Les variables JavaScript peuvent être des variables locales ou des variables globales.

Les variables privées peuvent utiliser des fermetures.

Variables globales

Les fonctions peuvent accéder à des variables définies à l'intérieur de la fonction, telles que :

Instances

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

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

instance

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

Dans cette dernière instance, 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.

En premier lieu, 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 n’affectera pas la valeur de l’autre.

Si la variable est déclarée sans utiliser le mot clé var, c'est une variable globale, même si elle est définie au sein d'une fonction.

Cycle de vie des variables

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 à l'intérieur d'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.

Dilemme du compteur

Imaginez si vous voulez compter certaines valeurs, et le compteur est disponible dans toutes les fonctions.

Vous pouvez utiliser des variables et des fonctions globales pour définir l'incrément du compteur :

Instance

var counter = 0; 
function add() {
   return 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 le compteur à l'intérieur d'une fonction, la valeur du compteur ne sera pas modifiée sans appeler la fonction :

Instance

function add() {
    var counter = 0;    return counter += 1;}
 add();add();add(); 
// 本意是想输出 3, 但事与愿违，输出的都是 1 !

Le code ci-dessus ne sera pas sortie correctement, chaque fois que j'appelle la fonction add() et que le compteur est défini sur 1.

Les fonctions intégrées JavaScript peuvent résoudre ce problème.

Fonctions intégrées JavaScript

Toutes les fonctions peuvent accéder aux variables globales.

En fait, en JavaScript, toutes les fonctions peuvent accéder à 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 embarquée plus() peut accéder à la variable compteur de la fonction parent :

Instance

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

Si on peut accéder à plus() fonctionner à l’extérieur, résolvant ainsi le contre-dilemme.

Nous devons également nous assurer que counter = 0 n'est exécuté qu'une seule fois.

Nous avons besoin de fermetures.

Fermetures 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

Avoir une compréhension générale de la connaissance de la fermeture des variables globales et locales Pour plus de matériel d'apprentissage, veuillez faire attention au site Web php chinois.

Recommandations associées :

Explications connexes sur la validation des formulaires JavaScript

Connaissance des événements contextuels JavaScript

Connaissances et utilisation liées à JavaScript Date (date)

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!