Fermeture JavaScript
Qu'est-ce qu'une fermeture
Fermetures, l'explication officielle des fermetures est : une variable avec plusieurs variables et An expression (généralement une fonction) de l'environnement auquel ces variables sont liées, de sorte que ces variables font 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 lorsqu'une fonction revient.
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.
2. Plusieurs façons d'écrire et d'utiliser les fermetures
Tout d'abord, vous devez comprendre que tout dans JS est un objet et que les fonctions sont un type d'objet. Examinons d'abord les cinq façons d'écrire des fermetures et comprenons brièvement ce que sont les fermetures. Ceci sera expliqué en détail plus tard.
//La première façon d'écrire
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());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
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 ) );Cette façon d'écrire consiste à déclarer une variable et à attribuer une fonction comme valeur à la variable.
//La troisième façon d'écrire
var Circle = new Object();
Circle.PI = 3.14159;
Circle.Area = function( r ) {
return this.PI * r * r;
}
alert( Circle.Area( 1.0 ) );Cette méthode est mieux comprise, qui consiste à créer un nouvel objet puis à ajouter des propriétés et des méthodes à l'objet.
//La quatrième façon d'écrire
var Circle={
"PI":3.14159,
"area":function(r){
return this.PI * r * r;
}
};
alert( Circle.area(1.0) );Cette méthode est couramment utilisée et est la plus pratique. var obj = {} déclare un objet vide.
//La cinquième façon d'écrire
var Circle = new Function("this.PI = 3.14159;this.area = function( r ) {return r*r*this.PI; } ");
alert( (new Circle()).area(1.0) );
Pour être honnête, je n'ai jamais utilisé cette méthode d'écriture. Vous peut pour référence.
En général, parmi les méthodes ci-dessus, la 2ème et la 4ème sont plus courantes, et vous pouvez choisir en fonction de vos habitudes.
Le prototype couramment utilisé en JS apparaît dans le code ci-dessus, alors à quoi sert le prototype ? Jetons un coup d'oeil :
var dom = function(){
};
dom.Show = function(){
alert("Show Message");
};
dom.prototype.Display = function(){
alert("Property Message");
};
dom.Display(); //error
dom.Show();
var d = new dom();
d.Display();
d.Show(); //errorCycle de vie des variables
La portée des variables globales est globale, c'est-à-dire dans tout le programme JavaScript, les variables globales sont partout.
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 :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</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>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 dans une fonction, la valeur du compteur ne peut pas être modifiée sans appeler la fonction :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</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>Le code ci-dessus ne s'affichera pas correctement, à chaque fois que j'appelle add( ), le compteur se mettra à 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 intégrée plus() peut accéder à la variable compteur de la fonction parent :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</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>Si nous pouvons accéder à la fonction plus() en externe, cela 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.
section suivante