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 aux variables définies dans la fonction, telles que :
<!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écutez le programme et essayez it out
La fonction peut également accéder à des variables définies en dehors de la fonction, telles que :
<!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 = 5;
function myFunction() {
document.getElementById("demo").innerHTML = a * a;
}
</script>
</body>
</html>Exécutez le programme et essayez-le
Dans ce dernier Par 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 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.
Conseils : Si une 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 dans l'ensemble du programme JavaScript, les variables globales sont partout, tous sont là.
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
<!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écutez le programme pour essayer it
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 changer 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écutez le programme pour l'essayer
Le code ci-dessus ne s'affichera pas correctement, chaque fois que j'appelle la fonction add(), le compteur sera mis à 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 :
<!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>
</htmlExécutez le programme et essayez-le
Si nous peut y accéder en externe avec la fonction plus(), ce qui peut résoudre 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 ?
<!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écutez le programme et essayez-le
Analyse d'instance
La variable add spécifie le mot de retour de la valeur d’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.
Astuce : Une fermeture est une fonction qui peut accéder aux variables dans la portée de la fonction de niveau supérieur, même si la fonction de niveau supérieur a été fermée.
![Projet front-end-Shangyou [Pratique complète de la technologie HTML/CSS/JS]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![Cours frontal base zéro [Vue apprentissage avancé et application pratique]](https://img.php.cn/upload/course/000/000/068/63bbd15353895588.jpg)
![Tutoriel WEB front-end [HTML5+CSS3+JS]](https://img.php.cn/upload/course/000/000/068/63ba60c8da520536.jpg)
![Application pratique Apipost [api, interface, tests automatisés, mock]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
