Heim > Artikel > Web-Frontend > Beispielcode-Freigabe für die Verwendung von JS-Schließungen

Beispielcode-Freigabe für die Verwendung von JS-Schließungen

黄舟Original: 2017-03-27 14:37:311632Durchsuche

In diesem Artikel wird hauptsächlich die Verwendung des JS-Abschlusses vorgestellt und das Prinzip, die Ausführungsschritte und die damit verbundenen Betriebsfähigkeiten des Javascript-Abschlusses anhand konkreter Beispiele analysiert siehe weiter

Die Beispiele in diesem Artikel beschreiben die Verwendung von JS-Verschlüssen. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

<!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>

Der erste Schritt besteht darin, die globale Kontextumgebung zu generieren, bevor der Code ausgeführt wird, und die Variablen Eine Zuweisung vornehmen. Der globale Kontext ist zu diesem Zeitpunkt aktiv. Globaler Kontext: max ist undefiniert

Der zweite Schritt

, wenn Sie den Code var f1 = fn() ausführen, rufen Sie fn() auf, was zu fn() führt; Ausführung Der Kontext wird auf den Stapel verschoben und in den aktiven Zustand versetzt. fn()-Kontext: max ist 10

Schritt 3

, nach der Ausführung von var f1 = fn(); ist der fn()-Aufruf abgeschlossen. Es liegt auf der Hand, dass der Ausführungskontext von fn() zerstört werden sollte, dies ist hier jedoch nicht möglich. Hinweis, hier kommt der wichtige Punkt: Denn wenn fn() ausgeführt wird, wird eine Funktion zurückgegeben. Das Besondere an Funktionen ist, dass sie einen eigenständigen Geltungsbereich schaffen können.

Zufälligerweise gibt es im zurückgegebenen Funktionskörper auch eine freie Variable max, die im Kontext von fn() im fn-Bereich auf max verweist.

Daher kann dieses Maximum nicht zerstört werden. Nachdem es zerstört wurde, kann das Maximum in der Balkenfunktion den Wert nicht finden. Daher kann der fn()-Kontext hier nicht zerstört werden und ist weiterhin im Ausführungskontextstapel vorhanden.

Wenn max = 100; ausgeführt wird, wird der globale Kontext aktiv, aber der fn()-Kontext befindet sich weiterhin im Ausführungskontextstapel.

Nachdem max = 100; ausgeführt wurde, wird max im globalen Kontext ein Wert von 100 zugewiesen.

Globaler Kontext: max ist 100 fn() Kontext: max ist 10

Schritt 4

, ausführen bis f1(15);, ausführen f1(15), das Das heißt, führen Sie bar(15) aus, erstellen Sie den Kontext bar(15) und versetzen Sie ihn in den aktiven Zustand. Beim Ausführen von bar(15) ist max eine freie Variable. Sie müssen in dem Bereich suchen, in dem die bar-Funktion erstellt wurde, und haben den Wert von max als 10 gefunden.

Der entscheidende Punkt hierbei ist, dass die Balkenfunktion erstellt wird, wenn fn() ausgeführt wird. Die Ausführung von fn() ist schon vor langer Zeit beendet, aber der Ausführungskontext von fn() existiert immer noch auf dem Stapel, sodass bei bar(15) max gefunden werden kann. Wenn der fn()-Kontext zerstört wird, kann max nicht gefunden werden.

Die Verwendung von Abschlüssen erhöht den Content-Overhead, das ist jetzt offensichtlich!

Der fünfte Schritt

nach der Ausführung von f1(15); ist der Zerstörungsprozess der Kontextumgebung, der hier nicht beschrieben wird. Abschlüsse sind untrennbar mit Umfang und Kontext verbunden. Es ist wirklich „es ist nicht einfach, dich zu lieben“!

Darüber hinaus werden Abschlüsse in vielen Anwendungen in

jQuery

verwendet, egal ob Sie etwas über ein klassisches Framework/Klassenbibliothek lernen möchten, oder Wenn Sie selbst ein Plug-In oder eine Klassenbibliothek entwickeln möchten, müssen Sie grundlegende Theorien wie Abschlüsse und Prototypen kennen. Andernfalls wissen Sie beim Auftreten von Fehlern nicht, warum, da diese Fehler möglicherweise völlig außerhalb Ihres Wissensbereichs liegen.

Das obige ist der detaillierte Inhalt vonBeispielcode-Freigabe für die Verwendung von JS-Schließungen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：AngularJS+Bootstrap+Table-Mehrfachauswahl-Codebeispiel (Alles auswählen), das die Zeilenauswahl mit einem Klick unterstützt, um Bearbeitungs- und Löschfunktionen zu implementierenNächster Artikel：AngularJS+Bootstrap+Table-Mehrfachauswahl-Codebeispiel (Alles auswählen), das die Zeilenauswahl mit einem Klick unterstützt, um Bearbeitungs- und Löschfunktionen zu implementieren

In Verbindung stehende Artikel

Mehr sehen