Exemple de partage de code pour l'utilisation de la fermeture JS-js tutoriel-php.cn

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

黄舟

Libérer： 2017-03-27 14:37:31

original

1593 Les gens l'ont consulté

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>

Copier après la connexion

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!

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

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