Les variables JavaScript peuvent appartenir à la portée locale orglobale.
Les variables globales peuvent être rendues locales (privées) avec des fermetures.
Variables globales
Une function peut accéder à toutes les variables définies à l’intérieur de la fonction, comme ceci :
Exemple
var a = 4;
return a * a;
}
Essayez vous-même »
Mais une function peut également accéder aux variables définies à l’extérieur de la fonction, comme ceci :
Exemple
fonction maFonction() {
return a * a;
}
Essayez vous-même »
Dans le dernier exemple, a est une variable globale.
Dans une page web, les variables globales appartiennent à l’objet fenêtre.
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 est une variable locale.
Une variable locale ne peut être utilisée qu’à l’intérieur de la fonction où elle est définie. Elle est cachée des autres fonctions et des autres codes de script.
Les variables globales et locales ayant le même nom sont des variables différentes. Modifier l’une, ne modifie pas l’autre.
Les variables créées sans mot clé de déclaration (varlet, ou const) sont toujours globales, même si elles sont créées à l’intérieur d’une fonction.
Durée de vie des variables
Les variables globales vivent jusqu’à ce que la page soit jetée, comme lorsque vous naviguez vers une autre page ou fermez la fenêtre.
Les variables locales ont une vie courte. Elles sont créées lorsque la fonction est invoquée, et supprimées lorsque la fonction est terminée.
Un dilemme de compteur
Supposons que vous voulez utiliser une variable pour compter quelque chose, et que vous voulez que ce compteur soit disponible pour toutes les fonctions.
Vous pourriez utiliser une variable globale, et un function pour augmenter le compteur :
Exemple
var counter = 0;
// Fonction pour incrémenter le compteur
fonction add() {
counter += 1 ;
}
// Appeler add() 3 fois
add();
add();
add();
// Le compteur devrait maintenant être 3
Essayez vous-même »
Il y a un problème avec la solution ci-dessus : Tout code sur la page peut modifier le compteur, sans appeler add().
Le compteur devrait être local à la fonction add(), pour empêcher un autre code de le modifier :
Exemple
var counter = 0;
// Fonction d’incrémentation du compteur
fonction add() {
var counter = 0 ;
counter += 1;
}
// Appeler add() 3 fois
add();
add();
//Le compteur devrait maintenant être 3. Mais il est à 0
Essayez vous-même »
Cela n’a pas fonctionné car nous affichons le compteur global au lieu du compteur local.
Nous pouvons supprimer le compteur global et accéder au compteur local en laissant la fonction le retourner :
Exemple
fonction add() {
var counter = 0 ;
counter += 1;
return counter;
}
/// Appeler add() 3 fois
add();
add();
// Le compteur devrait maintenant être 3. Mais il est de 1.
Essayez vous-même »
Cela n’a pas fonctionné parce que nous avons remis à zéro le compteur local chaque fois que nous appelons la fonction.
Une fonction interne JavaScript peut résoudre ce problème.
Fonctions imbriquées JavaScript
Toutes les fonctions ont accès à la portée globale.
En fait, en JavaScript, toutes les fonctions ont accès à la portée « au-dessus » d’elles.
JavaScript supporte les fonctions imbriquées. Les fonctions imbriquées ont accès à la portée « au-dessus » d’elles.
Dans cet exemple, la fonction intérieure plus() a accès à la variable counter de la fonction mère :
Exemple
var counter = 0;
fonction plus() {counter += 1;}
plus() ;
return counter ;
}
Essayez vous-même »
Cela aurait pu résoudre le dilemme du compteur, si nous pouvions atteindre la plus() fonction de l’extérieur.
Nous devons également trouver un moyen d’exécuter counter = 0 une seule fois.
Nous avons besoin d’une closure.
JavaScript Closures
Souvenez-vous des fonctions auto-invoquantes ? Que fait cette fonction ?
Exemple
var counter = 0;
return function () {counter += 1 ; return counter}
})();
add();
add();
add() ;
/// le compteur est maintenant 3
Essayez vous-même »
Exemple expliqué
La variable add est affectée à la valeur de retour d’une fonction auto-invoquante.
La fonction auto-invoquante ne s’exécute qu’une seule fois. Elle met le compteur à zéro (0), et renvoie une expression de fonction.
De cette façon, add devient une fonction. La partie « merveilleuse » est qu’elle peut accéder au compteur dans la portée parent.
C’est ce qu’on appelle une fermeture JavaScript. Elle permet à une fonction d’avoir des variables « privées ».
Le compteur est protégé par le scope de la fonction anonyme, et ne peut être modifié qu’en utilisant la fonction add.
Une fermeture est une fonction ayant accès au scope parent, même après la fermeture de la fonction parent.
.