Utilisation des fermetures JS

Cette fois, je vais vous présenter l'utilisation des fermetures JS. Quelles sont les précautions lors de l'utilisation des fermetures JS. Voici des cas pratiques, jetons un coup d'oeil.

La fermeture est une difficulté du langage Javascript, et c'est aussi sa fonctionnalité De nombreuses applications avancées s'appuient sur les fermetures.

Voici mes notes d'étude, qui devraient être très utiles pour les débutants en Javascript.

1. La portée des variables

Pour comprendre les fermetures, vous devez d'abord comprendre la portée des variables spéciales de Javascript.

La portée des variables n'est rien de plus que deux types : les variables globales et les variables locales.

La particularité du langage Javascript est que les variables globales peuvent être lues directement à l'intérieur de la fonction.

var n=999;

function f1(){
alert(n);
}

f1( // 999);

En revanche, les variables locales au sein d'une fonction ne peuvent pas être lues en dehors de la fonction.

function f1(){
var n=999;
}

alert(n); // erreur

ici Une chose à noter est que lors de la déclaration de variables dans une fonction, vous devez utiliser la commande var. Si vous ne l'utilisez pas, vous déclarez en fait une variable globale !

function f1(){
n=999;
}

f1();

alerte(n); 🎜>

2. Comment lire les variables locales de l'extérieur ?

Pour diverses raisons, nous avons parfois besoin d'obtenir des variables locales au sein d'une fonction. Cependant, comme mentionné précédemment, cela n’est pas possible dans des circonstances normales et ne peut être réalisé que grâce à des solutions de contournement.

C'est-à-dire qu'à l'intérieur de la fonction,

définissez une fonction .

fonction f1(){

var n=999;

fonction f2(){

alerte(n); >

　}

Dans le code ci-dessus, la fonction f2 est incluse dans la fonction f1. À ce stade, toutes les variables locales à l'intérieur de f1 sont visibles par f2. Mais l’inverse ne fonctionne pas. Les variables locales à l’intérieur de f2 sont invisibles pour f1. Il s'agit de la structure "chain scope" propre au langage Javascript. L'objet enfant recherchera les variables de tous les objets parents niveau par niveau. Par conséquent, toutes les variables de l’objet parent sont visibles par l’objet enfant, mais l’inverse n’est pas vrai.

Puisque f2 peut lire les variables locales dans f1, alors tant que f2 est utilisé comme valeur de retour, ne pouvons-nous pas lire ses variables internes en dehors de f1 ?

fonction f1(){

var n=999;

fonction f2(){

alerte(n);

}

Return f2;

}

var result=f1(); , Le concept de fermeture

La fonction f2 dans le code de la section précédente est une fermeture.

La définition de « clôture » dans diverses littératures professionnelles est très abstraite et difficile à comprendre. Je crois comprendre qu'une fermeture est une fonction qui peut lire les variables internes d'autres fonctions.

Étant donné que dans le langage Javascript, seules les sous-fonctions à l'intérieur de la fonction peuvent lire les variables locales, les fermetures peuvent être simplement comprises comme des « fonctions définies à l'intérieur d'une fonction ».

Ainsi, par essence, la fermeture est un pont reliant l'intérieur d'une fonction à l'extérieur de la fonction.

4. Utilisations des fermetures

Les fermetures peuvent être utilisées dans de nombreux endroits. Il a deux utilisations principales : l’une consiste à lire les variables à l’intérieur de la fonction, comme mentionné précédemment, et l’autre consiste à conserver les valeurs de ces variables en mémoire.

Comment comprendre cette phrase ? Veuillez regarder le code ci-dessous.

Fonction f1(){

var n=999;

nAdd=function(){n+=1}

fonction f2(){
　　alert(n);
　　}

　　return f2;

　}

　var result=f1( // 999

　nAdd); ();

　result(); // 1000

Dans ce code, le résultat est en fait la fonction de fermeture f2. Il a été exécuté deux fois, la première fois, la valeur était de 999, la deuxième fois, la valeur était de 1 000. Cela prouve que la variable locale n dans la fonction f1 est toujours stockée en mémoire et n'est pas automatiquement effacée après l'appel de f1.

Pourquoi cela se produit-il ? La raison en est que f1 est la fonction parent de f2 et que f2 est affecté à une variable globale, ce qui fait que f2 est toujours en mémoire, et l'existence de f2 dépend de f1, donc f1 est toujours en mémoire et ne sera pas supprimé. une fois l'appel terminé, recyclé par le mécanisme de récupération de place (garbage collection).

Une autre chose à noter dans ce code est la ligne "nAdd=function(){n+=1}". Tout d'abord, le mot-clé var n'est pas utilisé avant nAdd, donc nAdd est plutôt une variable globale. que les variables locales. Deuxièmement, la valeur de nAdd est une

fonction anonyme

(fonction anonyme), et cette fonction anonyme elle-même est également une fermeture, donc nAdd est équivalent à un setter, qui peut opérer sur des variables locales à l'intérieur de la fonction en dehors du fonction. 5. Points à noter lors de l'utilisation des fermetures

1) Étant donné que les fermetures entraîneront le stockage des variables de la fonction en mémoire, ce qui consomme beaucoup de mémoire, les fermetures ne peuvent pas être abusées, sinon Cela entraînera des problèmes de performances sur les pages Web et pourra provoquer des fuites de mémoire dans IE. La solution est de

supprimer

toutes les variables locales inutilisées avant de quitter la fonction. 2) La fermeture modifiera la valeur de la variable à l'intérieur de la fonction parent en dehors de la fonction parent. Ainsi, si vous utilisez la fonction parent comme objet (

object

), la fermeture comme méthode publique (méthode publique) et les variables internes comme propriété privée (valeur privée), cela fait attention à ne pas modifiez les valeurs des variables à l'intérieur de la fonction parent avec désinvolture. 6. Questions à réfléchir

Si vous pouvez comprendre les résultats des deux morceaux de code suivants, vous devez comprendre le mécanisme de fonctionnement des fermetures.

Extrait de code 1.

var name = "La fenêtre";

var object = {

name : "Mon objet",

getNameFunc : function(){

return function(){

return this.name;
);

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez. faites attention aux autres articles connexes sur le site Web php chinois !

Extrait de code 2.

Lecture recommandée :

Comment utiliser les chaînes JavaScript

var name = "The Window";
　　var object = {　　　　name : "My Object",
　　　　getNameFunc : function(){　　　　　　var that = this;　　　　　　return function(){　　　　　　　　return that.name;　　　　　　};
　　　　}
　　};
　　alert(object.getNameFunc()());

Comment réaliser une liaison bidirectionnelle de données dans l'ensemble d'applets WeChat

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!