Fermetures JavaScript
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 au sein de la fonction, telles que :
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p>函数可以访问函数内部定义的变量:</p>
<button type="button" onclick="myFunction()">点我</button>
<p id="demo"></p>
<script>
function myFunction() {
var a = 4;
document.getElementById("demo").innerHTML = a * a;
}
</script>
</body>
</html>Exécuter l'instance»
Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne
La fonction peut également accéder à des variables définies en dehors de la fonction, telles que :
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p>函数可以访问定义在函数外的变量：</p>
<button type="button" onclick="myFunction()">点我</button>
<p id="demo"></p>
<script>
var a = 4;
function myFunction() {
document.getElementById("demo").innerHTML = a * a;
}
</script>
</body>
</html>Exécuter l'instance»
Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne
La suivante Dans l'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.
En premier lieu, a est une variable locale.
Les variables locales ne peuvent être utilisées qu'à l'intérieur de 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.
 | La déclaration de variable est si vous n'utilisez pas
|
|---|
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 globales, des fonctions pour définir l'incrément du compteur :
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p>全局变量计数。</p>
<button type="button" onclick="myFunction()">计数!</button>
<p id="demo">0</p>
<script>
var counter = 0;
function add() {
return counter += 1;
}
function myFunction(){
document.getElementById("demo").innerHTML = add();
}
</script>
</body>
</html>Exécuter l'instance»
Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne
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 peut pas être modifiée sans appeler la fonction :
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p>局部变量计数。</p>
<button type="button" onclick="myFunction()">计数!</button>
<p id="demo">0</p>
<script>
function add() {
var counter = 0;
return counter += 1;
}
function myFunction(){
document.getElementById("demo").innerHTML = add();
}
</script>
</body>
</html>Exécuter l'instance»
Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne
Le code ci-dessus ne s'affichera pas correctement, et chaque fois que j'appelle l'ajout ( ), le compteur sera mis à 1.
Les fonctions intégrées de 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 counter de la fonction parent :
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p>局部变量计数。</p>
<p id="demo">0</p>
<script>
document.getElementById("demo").innerHTML = add();
function add() {
var counter = 0;
function plus() {counter += 1;}
plus();
return counter;
}
</script>
</body>
</html>Exécuter l'instance»
Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne
Si nous pouvons y accéder en externe plus( ), résolvant ainsi 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.
Fermetures JavaScript
Vous vous souvenez de la fonction qui s'appelle ? A quoi sert cette fonction ?
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p>局部变量计数。</p>
<button type="button" onclick="myFunction()">计数!</button>
<p id="demo">0</p>
<script>
var add = (function () {
var counter = 0;
return function () {return counter += 1;}
})();
function myFunction(){
document.getElementById("demo").innerHTML = add();
}
</script>
</body>
</html>Exécuter l'instance »
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
Analyse d'instance
Variable add spécifie la valeur du mot de retour de l'auto-appel de la fonction.
La fonction d'auto-appel n'est exécutée qu'une seule fois. Mettez le compteur à 0. et renvoie l'expression de la fonction.
ajouter une variable peut être utilisé 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.
 | 闭包是可访问上一层函数作用域里变量的函数，即便上一层函数已经关闭。 |
|---|
