5 einfache Sätze, um den Umfang von JavaScript zu lösen

Jedes Byte eines JavaScript -Programms wird in diesem oder diesem Ausführungskontext ausgeführt. Sie können sich diese Kontexte als Nachbarn des Code vorstellen, die jede Codezeile angeben können: woher es kommt und wer Freunde und Nachbarn sind. Ja, das sind sehr wichtige Informationen, denn die JavaScript -Gesellschaft hat ziemlich strenge Regeln, die festlegen, wer mit wem interagieren kann. Der Betriebskontext ist eine Community mit Toren anstelle einer winzigen Tür, die darin offen ist.

Wir können diese sozialen Grenzen in der Regel als Bereiche bezeichnen und haben eine ausreichende Bedeutung, um in der Charta eines jeden Nachbarn zu gesetzt, was die Umfangskette des Kontextes ist, über das wir sprechen möchten. Innerhalb einer bestimmten Nachbarschaftsbeziehung kann der Code nur in seiner Bereichskette auf Variablen zugreifen. Im Vergleich zu Variablen jenseits seiner Nachbarschaft geht der Code vor, mit lokaler (lokaler, lokaler) zu behandeln.

Jede Programmiersprache hat das Konzept des Umfangs. Einfach ausgedrückt ist Geltungsbereich der zugängliche Umfang von Variablen und Funktionen, dh Umfang kontrolliert den Sichtbarkeit und den Lebenszyklus von Variablen und Funktionen. Der Umfang von JavaScript war schon immer ein Wissenspunkt, der in der Front-End-Entwicklung schwer zu verstehen ist. Denken Sie an ein paar Wörter, um den Umfang von JavaScript leicht zu lösen.

1. "Kein Umfang auf Blockebene in JavaScript"

In Java oder C#gibt es einen Umfang auf Blockebene, dh auch die Zahnspangen sind auch ein Umfang.

 public static void main () {if (1 == 1) {String name = "sieben"; } System.out.println (Name);} // einen Fehler melden

 public static void main () {if (1 == 1) {String name = "sieben"; } Console.writeLine (Name);} // einen Fehler melden

Kein Bereich auf Blockebene in JavaScript

 Funktion main () {if (1 == 1) {var name = 'sieben'; } console.log (Name);} // Ausgabe: sieben

2. JavaScript übernimmt den Funktionsumfang

In JavaScript wirkt jede Funktion als Umfang, und Variablen im internen Bereich können nicht extern zugegriffen werden.

 Funktion main () {var innerValue = 'sieben';} main (); console.log (InnerValue); // Fehler: Uncornt ReferenceError: InnerValue ist nicht definiert

3. JavaScript -Bereichskette

Da jede Funktion in JavaScript ein Zielfernrohr ist, erscheint bei einer abgewandten Funktion eine Bereichskette.

 xo = 'Alex'; Funktion func () {var xo = "sieben"; Funktion inner () {var xo = 'alvin'; console.log (xo); } inner ();} func ();

Beispielsweise erscheint der obige Code in der Scope -Kette, die aus drei Scopes besteht. Wenn die Bereichskette angezeigt wird, wird die Bestellung angezeigt, wenn nach Variablen gesucht. Für das obige Beispiel:

Wenn Console.log (XO) ausgeführt wird, besteht die Suchreihenfolge根据作用域链从内到外zu suchen. Wenn die innere Schicht nicht vorhanden ist, wird nach und nach nachgeschaut, bis keine Ausnahme gefunden wird.

4. Die Scope -Kette von Javascript wurde vor der Ausführung erstellt

Der Umfang von JavaScript wurde erstellt, bevor es ausgeführt wird. Wenn es in Zukunft ausgeführt wird, müssen Sie nur nach der Bereichskette suchen.

Beispiel 1:

 xo = 'Alex'; Funktion func () {var xo = "sieben"; Funktion inner () {console.log (xo); } return innere;} var ret = func (); ret (); // Ausgabeergebnis: sieben

Der obige Code existiert bereits, bevor die Funktion aufgerufen wird:

Globaler Bereich -> Func -Funktionsumfang -> Innere Funktionsumgebung

Bei der Ausführung von [ret ();] wurde die Umfangskette dieser Funktion definiert als: Global Scope -> Func -Funktionsumfang -> innere Funktionsumfang. Bei der Ausführung von [ret ();] werden Variablen basierend auf der vorhandenen Bereichskette gefunden.

Beispiel 2:

 xo = 'Alex'; Funktion func () {var xo = "ecr"; Funktion inner () {console.log (xo); } xo = 'sieben'; Innere zurückgeben;} var ret = func (); ret (); // Ausgabeergebnis: sieben

Der obige Code hat den gleichen Zweck wie Beispiel 1 und betont auch, dass die Bereichskette bereits vorhanden ist, bevor die Funktion aufgerufen wird:

Globaler Bereich -> Func -Funktionsumfang -> Innere Funktionsumgebung

Bei der Ausführung von [var ret = func ();] wurde der Wert der XO -Variablen im Func -Bereich auf "sieben" von "Eric" zurückgesetzt. Bei der Ausführung von [ret (); später können Sie später nur "sieben" finden.

Beispiel 3:

 xo = 'Alex'; Funktion bar () {console.log (xo);} Funktion func () {var xo = "sieben"; Rückgabeleiste;} var ret = func (); ret (); // Ausgabeergebnis: Alex

Im obigen Code wurden zwei Zielfernrohrketten erstellt, bevor die Funktion ausgeführt wird:

Globaler Bereich -> Balkenfunktion Umfang

Globaler Bereich -> Func -Funktionsumfang

Bei der Ausführung von [Ret ();] bezieht sich RET auf die Balkenfunktion, und die Umfangskette der Balkenfunktion besteht bereits: Global Teller -> Balkenfunktion Umfang.

5. Erklärung im Voraus

Wenn Sie keine Variablen erstellen und sie direkt in JavaScript verwenden, wird ein Fehler gemeldet:

 console.log (xxoo); // error: Uncornt ReferenceError: xxoo ist nicht definiert

Wenn in JavaScript ein Wert erstellt wird, ohne einen Wert zuzuweisen, ist der Wert undefiniert, wie beispielsweise:

 var xxoo; console.log (xxoo); // output: undefiniert in der Funktion, wenn wie folgt geschrieben: Funktion foo () {console.log (xo); var xo = 'sieben';} foo (); // Ausgabe: undefiniert

Der obige Code meldet keinen Fehler, gibt jedoch undefined aus. Der Grund dafür ist, dass JavaScript -Funktionen, bevor sie ausgeführt werden, alle Variablen in ihnen deklarieren, ohne Werte zuzuweisen. Daher entspricht es dem obigen Beispiel, dass die Funktion Var XO bereits ausgeführt hat, wenn "vorkompiliert" wird. Die Ausgabe des obigen Codes ist also undefiniert.

JS ist eine sehr interessante Sprache. Da viele seiner Merkmale auf den Betrieb von DOM in HTML abzielen, erscheint es lässig und etwas weniger streng. Mit dem kontinuierlichen Wohlstand und der Entwicklung des Front-Ends und des Aufstiegs des Knotens ist JS in der Jquery-Ära jedoch keine "Spielzeugsprache" oder eine "CSS-Erweiterung". Der in diesem Artikel erwähnte Artikel ist für Anfänger und JS -Entwickler, die die traditionelle Webentwicklung durchlaufen haben, leicht verwirrt oder missverstanden zu werden. Ich hoffe, dieser Artikel kann hilfreich sein.