Utilisation basique des fonctions de fermeture JavaScript et solutions aux problèmes rencontrés

Le contenu de cet article concerne l'utilisation de base des fonctions de fermeture JavaScript et les solutions aux problèmes rencontrés. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Lors de l'entretien, on m'a toujours demandé ce qu'est une fermeture. Je ne m'en souciais pas vraiment avant, encore moins la résumer

La fermeture . sont des fonctions qui peuvent lire des variables à l'intérieur d'autres fonctions.
Donc, par essence, la fermeture est un pont reliant l’intérieur de la fonction à l’extérieur de la fonction.

(1) L'application la plus basique de la fermeture :

少废话,上代码

还是>的栗子，

function createComparisonFunction(propertyName) {
    return function(object1, object2) {
        var value1 = object1[propertyName];
        var value2 = object2[propertyName];

        if(value1  value2) {
            return 1;
        } else {
            return 0;
        }
    };
}
var compare = createComparisonFunction("name"); 

var result = compare({ name: "Nicholas" }, { name: "Greg" });

Analyse :
(1) La fonction de fermeture peut accéder à sa fonction externe
a renvoyé cet anonyme function est une fonction de fermeture. L'objet actif dans cette fonction anonyme qui accède à la fonction externe est le paramètre propertyName. Étant donné que la chaîne de portée externe est incluse par cette fonction anonyme (elle peut également être comprise comme : la fonction de comparaison contient l'objet actif et l'objet variable globale de la fonction
createComparisonFunction()), la fonction anonyme renvoyée peut toujours accéder à sa chaîne de portée externe. propertyName et variables globales.
(2) Les variables externes référencées par la fermeture ne seront pas détruites du fait de la destruction du scope dans lequel elles se trouvent
Car dans la fonction de fermeture renvoyée, l'objet actif de la fonction externe est référencé, donc l'objet actif dans createComparisonFunction() (c'est-à-dire propertyName) ne sera pas détruit après l'exécution de createComparisonFunction(). Car bien que createComparisonFunction détruira la chaîne de portée dans son environnement d'exécution après l'exécution, son objet actif est toujours référencé par la fonction de fermeture et placé dans la portée de l'environnement d'exécution de la fonction anonyme

( 2) Effets secondaires de fermetures

(1). Les fermetures ne peuvent obtenir que la dernière valeur de n'importe quelle variable dans la fonction contenant

        function createFunctions(){ 
            var result = new Array(); 
            for (var i=0; i <p>Principe : <br>En raison du rôle de chaque fonction Les objets actifs de la fonction createFunctions() est stockée dans la chaîne de domaines, elles font donc toutes référence à la même variable i. Lorsque la fonction createFunctions() revient, la valeur de la variable i est 10. À ce stade, chaque fonction fait référence au même objet variable qui enregistre la variable i, donc la valeur de i à l'intérieur de chaque fonction est 10</p><p> Solution : </p><pre class="brush:php;toolbar:false">获取内部函数的对象result[i]时,使用匿名函数,并在匿名函数中再使用闭包函数,使得当前环境下的num被闭包函数函数调用,存储在作用域中不会被释放.

        function  createFunctions2(){
            var result  = new Array();
            for(var i = 0 ; i <p>Principe : <br> définit une fonction anonyme et attribue le résultat de l'exécution immédiate de la fonction anonyme au tableau. La fonction anonyme a ici un paramètre num, qui est la valeur à renvoyer par la fonction finale. Lors de l’appel de chaque fonction anonyme, nous passons la variable i. Puisque les paramètres de fonction sont transmis par valeur, la valeur actuelle de la variable i est copiée dans le paramètre num. À l'intérieur de cette fonction anonyme, une fermeture accédant à num est créée et renvoyée. De cette façon, chaque fonction du tableau de résultats possède sa propre copie de la variable num et peut donc renvoyer une valeur différente. </p><p>(2). Lorsqu'une fonction anonyme est incluse en dehors de la fonction de fermeture, cela renvoie au </p><pre class="brush:php;toolbar:false">        var name = "The Window";
        var object = {
            name: "My Object",
            getNameFunc: function () {   
                return function () {        //匿名函数执行具有全局性
                    return this.name;       //this指向window
                };
            }
        };

        console.log(object.getNameFunc()())  //  The Window

Principe global :
Chaque fonction en obtiendra automatiquement deux lorsqu'elle est appelée. Variables spéciales : ceci et arguments. Lorsque la fonction interne
recherche ces deux variables, elle ne recherchera que jusqu'à son objet actif, donc l'externe this ne peut pas être obtenu à ce moment, getNameFunc() renvoie une fonction anonyme, et la fonction anonyme est donc globale. pointe vers la fenêtre globale

Solution :
Enregistrez cet objet dans la portée externe dans une variable à laquelle la fermeture peut accéder, puis la fermeture peut accéder à l'objet

    var name2 =  "The  Window";
    var object2 = {
        name:"My Object",
        getNameFunc:function(){
            var that =  this; //将外部函数的this保存在外部函数的活动对象中(函数中申明的变量中)
            return function (){
                return that.name
            }
        }
    }
    
    console.log(object2.getNameFunc()())   //My Object

---

(3)
Inconvénients des fermetures
(1) Parce qu'une fermeture porte la portée de la fonction qui la contient, elle occupera plus de mémoire que les autres fonctions. Une utilisation excessive de fermetures peut entraîner une utilisation excessive de la mémoire
(2) Les fermetures ne peuvent obtenir que la dernière valeur de n'importe quelle variable dans la fonction contenant, alors faites attention à l'écriture

1. . rubrique

2. Détails de l'article

                                                                                                        

姧姧鲁                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       Publié il y a 3 minutes Fonction de fermeture

javascript

Lecture 7 fois                                                              La lecture prend 12 minutes                                                                                                                           >                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               

• On m'a toujours demandé ce qu'est une clôture lors de l'entretien, je ne m'en souciais pas vraiment avant, encore moins de la résumer.
  La fermeture
est une fonction qui peut

lire les variables internes

d'autres fonctions.

Donc, par essence, la fermeture est un pont reliant l’intérieur de la fonction à l’extérieur de la fonction.

(1) L'application la plus basique de la fermeture :

少废话,上代码

还是>的栗子，

function createComparisonFunction(propertyName) {
    return function(object1, object2) {
        var value1 = object1[propertyName];
        var value2 = object2[propertyName];

        if(value1  value2) {
            return 1;
        } else {
            return 0;
        }
    };
}
var compare = createComparisonFunction("name"); 

var result = compare({ name: "Nicholas" }, { name: "Greg" });

Analyse :
(1) La fonction de fermeture peut accéder à sa fonction externe
La fonction anonyme renvoyée C'est une fonction de fermeture. L'objet actif dans cette fonction anonyme qui accède à la fonction externe est le paramètre propertyName. Étant donné que la chaîne de portée externe est incluse par cette fonction anonyme (elle peut également être comprise comme : la fonction de comparaison contient l'objet actif et l'objet variable globale de la fonction
createComparisonFunction()), la fonction anonyme renvoyée peut toujours accéder à sa chaîne de portée externe. propertyName et variables globales.
(2) Les variables externes référencées par la fermeture ne seront pas détruites du fait de la destruction du scope dans lequel elles se trouvent
Car dans la fonction de fermeture renvoyée, l'objet actif de la fonction externe est référencé, donc l'objet actif dans createComparisonFunction() (c'est-à-dire propertyName) ne sera pas détruit après l'exécution de createComparisonFunction(). Car bien que createComparisonFunction détruira la chaîne de portée dans son environnement d'exécution après l'exécution, son objet actif est toujours référencé par la fonction de fermeture et placé dans la portée de l'environnement d'exécution de la fonction anonyme

---

(2) Effets secondaires des fermetures

(1). Les fermetures ne peuvent obtenir que la dernière valeur de n'importe quelle variable dans la fonction contenant

        function createFunctions(){ 
            var result = new Array(); 
            for (var i=0; i <p>Principe : <br>Parce que chaque objet actif de createFunctions () est stockée dans la chaîne de portée de la fonction, elles font donc toutes référence à la même variable i. Lorsque la fonction createFunctions() revient, la valeur de la variable i est 10. À ce stade, chaque fonction fait référence au même objet variable qui enregistre la variable i, donc la valeur de i à l'intérieur de chaque fonction est 10</p><p> Solution : </p><pre class="brush:php;toolbar:false">获取内部函数的对象result[i]时,使用匿名函数,并在匿名函数中再使用闭包函数,使得当前环境下的num被闭包函数函数调用,存储在作用域中不会被释放.

        function  createFunctions2(){
            var result  = new Array();
            for(var i = 0 ; i <p>Principe : <br> définit une fonction anonyme et attribue le résultat de l'exécution immédiate de la fonction anonyme au tableau. La fonction anonyme a ici un paramètre num, qui est la valeur à renvoyer par la fonction finale. Lors de l’appel de chaque fonction anonyme, nous passons la variable i. Puisque les paramètres de fonction sont transmis par valeur, la valeur actuelle de la variable i est copiée dans le paramètre num. À l'intérieur de cette fonction anonyme, une fermeture accédant à num est créée et renvoyée. De cette façon, chaque fonction du tableau de résultats possède sa propre copie de la variable num et peut donc renvoyer une valeur différente. </p><p>(2). Lorsqu'une fonction anonyme est incluse en dehors de la fonction de fermeture, cela renvoie au </p><pre class="brush:php;toolbar:false">        var name = "The Window";
        var object = {
            name: "My Object",
            getNameFunc: function () {   
                return function () {        //匿名函数执行具有全局性
                    return this.name;       //this指向window
                };
            }
        };

        console.log(object.getNameFunc()())  //  The Window

Principe global :
Chaque fonction en obtiendra automatiquement deux lorsqu'elle est appelée. Variables spéciales : ceci et arguments. Lorsque la fonction interne
recherche ces deux variables, elle ne recherchera que jusqu'à son objet actif, donc l'externe this ne peut pas être obtenu à ce moment, getNameFunc() renvoie une fonction anonyme, et la fonction anonyme est donc globale. pointe vers la fenêtre globale

Solution :
Enregistrez cet objet dans la portée externe dans une variable à laquelle la fermeture peut accéder, puis la fermeture peut accéder à l'objet

    var name2 =  "The  Window";
    var object2 = {
        name:"My Object",
        getNameFunc:function(){
            var that =  this; //将外部函数的this保存在外部函数的活动对象中(函数中申明的变量中)
            return function (){
                return that.name
            }
        }
    }
    
    console.log(object2.getNameFunc()())   //My Object

---

(3)
Inconvénients des fermetures
(1) Parce qu'une fermeture porte la portée de la fonction qui la contient, elle occupera plus de mémoire que les autres fonctions. Une utilisation excessive de fermetures peut entraîner une utilisation excessive de la mémoire
(2) Les fermetures ne peuvent obtenir que la dernière valeur de n'importe quelle variable dans la fonction contenant, alors faites attention à l'écriture

.

• 

• Rapport

Vous pourriez être intéressé

Commentaires                                                                                Trier par heure

Chargement...

Afficher plus de commentaires

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!