Fermetures JavaScript
Qu'est-ce qu'une fermeture ?
La fermeture, l'explication officielle de la fermeture est : celle qui a de nombreuses variables et lie ces variables Une expression de l'environnement (généralement une fonction), ces variables font donc partie de l'expression. Caractéristiques de fermeture :
1. En référence à une variable de fonction, elle est activée au retour de la fonction.
2. Une fermeture est une zone de pile qui ne libère pas de ressources lors du retour d'une fonction.
En termes simples, Javascript permet l'utilisation de fonctions internes --- c'est-à-dire que les définitions de fonction et les expressions de fonction sont situées dans le corps de fonction d'une autre fonction. De plus, ces fonctions internes ont accès à toutes les variables locales, paramètres et autres fonctions internes déclarées dans la fonction externe dans laquelle elles existent. Une fermeture est formée lorsqu'une de ces fonctions internes est appelée en dehors de la fonction externe qui la contient.
Plusieurs façons d'écrire et d'utiliser les fermetures
La première façon d'écrire
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<script type="text/javascript">
function Circle(r) {
this.r = r;
}
Circle.PI = 3.14159;
Circle.prototype.area = function() {
return Circle.PI * this.r * this.r;
}
var c = new Circle(1.0);
alert(c.area());
</script>
</head>
<body>
</body>
</html>Il n'y a rien de spécial dans cette façon d'écrire, elle ajoute juste quelques attributs à la fonction.
La deuxième façon d'écrire
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<script type="text/javascript">
var Circle = function() {
var obj = new Object();
obj.PI = 3.14159;
obj.area = function( r ) {
return this.PI * r * r;
}
return obj;
}
var c = new Circle();
alert( c.area( 1.0 ) );
</script>
</head>
<body>
</body>
</html>Cette façon d'écrire est de déclarer une variable et d'attribuer une fonction comme valeur à la variable.
La troisième façon d'écrire
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<script type="text/javascript">
var Circle = new Object();
Circle.PI = 3.14159;
Circle.Area = function( r ) {
return this.PI * r * r;
}
alert( Circle.Area( 1.0 ) );
</script>
</head>
<body>
</body>
</html>Cette méthode est mieux comprise, c'est-à-dire créer un nouvel objet, puis ajouter des attributs et méthode.
La quatrième façon d'écrire
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<script type="text/javascript">
var Circle={
"PI":3.14159,
"area":function(r){
return this.PI * r * r;
}
};
alert( Circle.area(1.0) );
</script>
</head>
<body>
</body>
</html>Cette méthode est couramment utilisée et est la plus pratique. var obj = {} consiste à déclarer un objet vide
Le but de la fermeture Javascript
En fait, en utilisant des fermetures, on peut faire beaucoup de choses. Par exemple, il peut simuler le style de codage orienté objet ; exprimer le code de manière plus élégante et concise et améliorer l'efficacité d'exécution du code dans certains aspects ;
1. Fonction auto-exécutable anonyme
2. Cache des résultats
3.
4. Classes d'implémentation et héritage
Fonctions intégrées JavaScript
Toutes les fonctions peuvent accéder aux variables globales.
En fait, en JavaScript, toutes les fonctions ont accès à 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 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>Si on peut accéder à plus fonction externe (), cela peut résoudre le contre-dilemme.
Nous devons également nous assurer que counter = 0 n'est exécuté qu'une seule fois.
Des fermetures sont nécessaires ici.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<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>Analyse d'instance
La 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.
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)
