Variables JavaScript peuvent appartenir à la portée locale ou globale.
Les variables privées peuvent être rendues possibles grâce à des fermetures.
Variables globales
Une fonction peut accéder à toutes les variables définies dans la fonction, comme ceci:
Mais une fonction peut également accéder à des variables définies en dehors de la fonction, comme ceci:
Dans le dernier exemple, a est une variable globale.
Dans une page Web, les variables globales appartiennent à l'objet de la fenêtre.
Les variables globales peuvent être utilisées (et modifiés) par tous les scripts dans la page (et dans la fenêtre).
Dans le premier exemple, a est une variable locale.
Une variable locale ne peut être utilisée dans la fonction dans laquelle elle est définie. Il est caché par les autres fonctions et autre code de script.
Les variables globales et locales avec le même nom sont différentes variables. Modification de l'un, ne modifie pas l'autre.
Les variables créées sans le mot - clé var, sont toujours globales, même si elles sont créées à l' intérieur d' une fonction.
Durée de vie variable
Les variables globales vivent aussi longtemps que votre application (votre fenêtre / votre page web) vit.
Les variables locales ont des vies courtes. Ils sont créés lorsque la fonction est invoquée, et supprimés lorsque la fonction est terminée.
Un dilemme Counter
Supposons que vous souhaitez utiliser une variable pour compter quelque chose, et vous voulez que ce compteur soit disponible à toutes les fonctions.
Vous pouvez utiliser une variable globale, et une fonction d'augmenter le compteur:
Exemple
var counter = 0;
function add() {
counter += 1;
}
add();
add();
add();
// the counter is now equal to 3
Essayez - le vous - même » Le compteur ne doit être modifiée par l' add() fonction.
Le problème est, que tout script sur la page peut changer le compteur, sans appeler add() .
Si je déclare le compteur dans la fonction, personne ne sera en mesure de le changer sans appeler ajouter ():
Exemple
function add() {
var counter = 0;
counter += 1;
}
add();
add();
add();
// the counter should now be 3, but it does not work !
Essayez - le vous - même » Cela n'a pas fonctionné! Chaque fois que j'appelle l' add() fonction, le compteur est mis à 1.
Une fonction intérieure JavaScript peut résoudre ce problème.
Fonctions JavaScript emboîtées
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" eux.
JavaScript prend en charge les fonctions imbriquées. Les fonctions imbriquées ont accès à la portée "au-dessus" eux.
Dans cet exemple, la fonction interne plus() a accès à la variable de comptage dans la fonction mère:
Exemple
function add() {
var counter = 0;
function plus() {counter += 1;}
plus();
return counter;
} Essayez - le vous - même » Cela aurait pu résoudre le dilemme contre, si nous pouvions atteindre le plus() fonction de l'extérieur.
Nous avons également besoin de trouver un moyen d'exécuter compteur = 0 une seule fois.
Nous avons besoin d' une fermeture.
JavaScript fermetures
Rappelez-vous les fonctions d'auto-invocation? Qu'est-ce que cette fonction fait?
Exemple
var add = (function () {
var counter = 0;
return function () {return counter += 1;}
})();
add();
add();
add();
// the counter is now 3
Essayez - le vous - même » Exemple Explained
L'add variable est affectée la valeur de retour d'une fonction d'auto-invocation.
La fonction d'auto-invocation ne fonctionne qu'une seule fois. Il met le compteur à zéro (0), et renvoie une expression de fonction.
De cette façon, add devient une fonction. La partie «merveilleux» est qu'il peut accéder au compteur dans le champ d'application de parent.
Ceci est appelé une fermeture JavaScript. Il permet à une fonction d'avoir des variables «privées».
Le compteur est protégé par la portée de la fonction anonyme, et ne peut être modifié en utilisant la fonction d'ajout.
Une fermeture est un accès aux fonctions d'avoir à la portée des parents, même après la fonction de parent a fermé.