Fermeture JavaScript

Les variables JavaScript appartiennent àlocalouGlobalportée.

Les variables globales peuvent être accessibles parFermetureréaliser un local (privé).

Variable globale

Une fonction peut accéder à une fonctionInternesDéfinies par une fonction, par exemple :

Exemple

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

Essayer vous-même

Mais une fonction peut également accéder aux variables définies par elle-mêmeExterneDéfinies comme des variables, par exemple :

Exemple

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

Essayer vous-même

Dans le dernier exemple,a estGlobalVariable.

Dans une page web, les variables globales appartiennent à l'objet window.

Les variables globales peuvent être utilisées et modifiées par tous les scripts de la page (et de la fenêtre).

Dans le premier exemple,a estLocaleVariable.

Les variables locales ne peuvent être utilisées que dans la fonction où elles sont définies. Elles sont invisibles pour d'autres fonctions et scripts.

Les variables globales et locales portant le même nom sont des variables différentes. La modification d'une ne change pas l'autre.

sansmot-clé var Les variables créées sont toujours globales, même si elles sont créées dans une fonction.

Cycle de vie des variables

Les variables globales vivent aussi longtemps que votre application (fenêtre, page web).

Les variables locales n'ont pas une longue durée de vie. Elles sont créées lors de l'appel d'une fonction et supprimées après la fin de la fonction.

Un dilemme de compteur

Supposons que vous souhaitez utiliser une variable pour compter, et que vous souhaitez que ce compteur soit accessible à toutes les fonctions.

Vous pouvez utiliser des variables globales et des fonctions pour augmenter le compteur :

Exemple

// Initialisation du compteur
var counter = 0;
// Fonction d'augmentation du compteur
function add() {
  counter += 1;
}
// Appel trois fois add()
add();
add();
add();
// Le compteur devrait être 3

Essayer vous-même

Ce modèle a un problème : n'importe quel code sur la page peut modifier le compteur sans appeler add().

Pour la fonction add(), le compteur devrait être local pour éviter que d'autres codes ne le changent :

Exemple

// Initialisation du compteur
var counter = 0;
// Fonction d'augmentation du compteur
function add() {
  var counter = 0; 
  counter += 1;
}
// Appel trois fois add()
add();
add();
add();
// Le compteur devrait être 3. Mais c'est 0.

Essayer vous-même

C'est inutile, car nous affichons le compteur global au lieu du compteur local.

En permettant à la fonction de renvoyer elle-même, nous pouvons supprimer le compteur global et accéder au compteur local :

Exemple

// Fonction d'augmentation du compteur
function add() {
  var counter = 0; 
  counter += 1;
  return counter;
}
// Appel trois fois add()
add();
add();
add();
// Le compteur devrait être 3. Mais c'est 1.

Essayer vous-même

C'est inutile, car nous réinitialisons le compteur local à chaque appel de fonction.

Les fonctions internes JavaScript peuvent résoudre ce problème.

Fonctions imbriquées JavaScript

Toutes les fonctions ont le droit d'accéder à la portée globale.

En réalité, en JavaScript, toutes les fonctions ont le droit d'accéder à leur propre portée supérieure.

JavaScript supporte les fonctions imbriquées. Les fonctions imbriquées peuvent accéder à leur propre portée.

Dans cet exemple, la fonction interne plus() peut accéder aux variables de la fonction parente counter Variable de comptage :

Exemple

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

Essayer vous-même

De cette manière, nous pouvons résoudre le dilemme du compteur, si nous pouvons accéder à l'extérieur plus() Fonction.

Nous devons également trouver une fonction qui ne s'exécute qu'une fois counter = 0 Méthode.

Nous avons besoin de fermeture (closure).

Fermeture JavaScript

Souvenez-vous de la fonction auto-appelée ? Que fait cette fonction ?

Exemple

var add = (function () {
    var counter = 0;
    return function () {return counter += 1;}
))
add();
add();
add();
// Le compteur est actuellement à 3

Essayer vous-même

Explication de l'exemple

Variable add L'attribution est la valeur de retour de la fonction auto-appelée.

Cette fonction auto-appelée ne s'exécute qu'une fois. Elle règle le compteur à zéro (0) et retourne l'expression de la fonction.

De cette manière, add est devenu une fonction. Le plus "spectaculaire" est qu'elle peut accéder au compteur de l'environnement parent.

C'est ce qu'on appelle JavaScript Fermeture. Il rend la fonction propriétaire de "PrivéIl est devenu possible pour une variable.

Le compteur est protégé par l'environnement de la fonction anonyme et ne peut être modifié que par la fonction add.

Un fermeture (closure) est une fonction qui a le droit d'accéder à l'environnement de la fonction parente, même après que la fonction parente ait fermé.