Maison >interface Web >js tutoriel >Exemple de partage de code pour l'utilisation de la fermeture JS

Exemple de partage de code pour l'utilisation de la fermeture JS

黄舟original: 2017-03-27 14:37:311650parcourir

Cet article présente principalement l'utilisation de la fermeture JS et analyse le principe, les étapes d'exécution et les compétences opérationnelles associées de la fermeture javascript sous la forme d'exemples spécifiques. référez-vous à ce qui suit

Les exemples de cet article décrivent l'utilisation des fermetures JS. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
  </head>
  <body>
    <script type="text/javascript">
//      第一，函数作为返回值
      function fn(){
        var max = 10;
        return function bar(x){
          if(x > max) {
            console.log(x);
          }
        };
      }
      var f1 = fn();
      f1(15);
    </script>
    <script type="text/javascript">
//      第二，函数作为参数被传递
      var max = 10;
      fn = function(x){
        if(x > max){
          console.log(x);//15
        }
      };
      (function(f){
        var max = 100;
        f(15);
      })(fn);
    </script>
    <script>
      function fn(){
        var max = 10;
        return function bar(x){
          if(if > max){
            console.log(x);
          }
        };
      }
      var f1 = fn();
        max = 100;
      f1(15);
    </script>
  </body>
</html>

La première étape consiste à générer l'environnement de contexte global avant l'exécution du code et à définir le variables Faire une mission. Le contexte mondial est actif en ce moment.

Contexte global : max n'est pas défini

La deuxième étape, lors de l'exécution du code var f1 = fn(); exécution Le contexte est poussé sur la pile et défini sur l'état actif.

Contexte fn() : max est 10

Étape 3, après avoir exécuté var f1 = fn();, l'appel fn() est terminé. Il va de soi que le contexte d'exécution de fn() devrait être détruit, mais cela ne peut pas être fait ici.

Remarque, voici le point important : car lorsque fn() est exécuté, une fonction est renvoyée. La particularité des fonctions est qu'elles peuvent créer une portée indépendante.

Par coïncidence, dans le corps de la fonction renvoyé, il existe également une variable libre max qui fait référence à max dans le contexte de fn() dans la portée fn.

Par conséquent, ce max ne peut pas être détruit. Après sa destruction, le max dans la fonction bar ne peut pas trouver la valeur. Par conséquent, le contexte fn() ici ne peut pas être détruit et existe toujours dans la pile de contexte d'exécution.

Lorsque max = 100; est exécuté, le contexte global deviendra actif, mais le contexte fn() sera toujours dans la pile de contexte d'exécution.

De plus, après l'exécution de max = 100; max dans le contexte global se voit attribuer une valeur de 100.

Contexte global : max est de 100 Contexte fn() : max est de 10

Étape 4, exécutez jusqu'à f1(15);, exécutez f1(15), qui c'est-à-dire, exécutez bar(15), créez le contexte bar(15) et définissez-le sur l'état actif.

Lors de l'exécution de bar(15), max est une variable libre. Vous devez rechercher dans la portée où la fonction bar a été créée et trouver la valeur de max égale à 10.

Le point clé ici est que la fonction bar est créée lorsque fn() est exécuté. L'exécution de fn() est terminée depuis longtemps, mais le contexte d'exécution de fn() existe toujours sur la pile, donc lorsque bar(15), max peut être trouvé. Si le contexte fn() est détruit, alors max est introuvable.

L'utilisation de fermetures augmente la surcharge de contenu, c'est évident maintenant !

La cinquième étape, après l'exécution de f1(15); est le processus de destruction de l'environnement contextuel, qui ne sera pas décrit ici.

Les fermetures sont indissociables de la portée et du contexte C’est vraiment « ce n’est pas facile de t’aimer » !

De plus, les fermetures sont utilisées dans de nombreuses applications dans

jQuery, que vous souhaitiez en savoir plus sur un framework/bibliothèque de classes classique, ou Si vous souhaitez développer vous-même un plug-in ou une bibliothèque de classes, vous devez connaître les théories de base telles que les fermetures et les prototypes. Sinon, lorsque des bugs apparaissent, vous ne saurez pas pourquoi, car ces bugs peuvent être complètement hors de portée de vos connaissances.

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Exemple de code à sélection multiple Angularjs+bootstrap+table (tout sélectionner) qui prend en charge la sélection de lignes en un seul clic pour implémenter les fonctions d'édition et de suppressionArticle suivant：Exemple de code à sélection multiple Angularjs+bootstrap+table (tout sélectionner) qui prend en charge la sélection de lignes en un seul clic pour implémenter les fonctions d'édition et de suppression

Articles Liés

Voir plus