Heim > Artikel > Web-Frontend > Umfassende Analyse des JavaScript-Umfangs (mit Code)
Dieser Artikel bietet Ihnen eine umfassende Analyse des JavaScript-Bereichs (mit Code). Ich hoffe, dass er Ihnen hilfreich sein wird.
Der Gültigkeitsbereich bestimmt den Lebenszyklus und die Sichtbarkeit von Variablen. Variablen sind außerhalb des Gültigkeitsbereichs nicht sichtbar.
Der Umfang von JavaScript umfasst: Modulumfang, Funktionsumfang, Blockumfang, lexikalischer Geltungsbereich und globaler Geltungsbereich.
Variablen, die außerhalb des Geltungsbereichs einer Funktion, eines Blocks oder eines Moduls definiert sind, haben einen globalen Geltungsbereich. Auf globale Variablen kann überall im Programm zugegriffen werden.
Das Erstellen globaler Variablen wird schwieriger, wenn das Modulsystem aktiviert ist, ist aber trotzdem möglich. Sie können in HTML eine Variable definieren, die außerhalb der Funktion deklariert werden muss, und so eine globale Variable erstellen:
<script> let GLOBAL_DATA = { value : 1}; </script> console.log(GLOBAL_DATA);
Das Erstellen globaler Variablen ist viel einfacher, wenn kein Modulsystem vorhanden ist. Außerhalb von Funktionen in einer Datei deklarierte Variablen sind globale Variablen.
Globale Variablen laufen über den gesamten Lebenszyklus des Programms.
Eine andere Möglichkeit, globale Variablen zu erstellen, besteht darin, das globale Objekt window
an einer beliebigen Stelle in Ihrem Programm zu verwenden:
window.GLOBAL_DATA = { value: 1 };
Auf diese Weise ist die Variable GLOBAL_DATA
überall.
console.log(GLOBAL_DATA)
Aber Sie wissen auch, dass dieser Ansatz schlecht ist.
Wenn Module nicht aktiviert sind, sind außerhalb aller Funktionen deklarierte Variablen globale Variablen. In einem Modul werden außerhalb einer Funktion deklarierte Variablen ausgeblendet und sind in anderen Modulen nicht verfügbar, sofern sie nicht explizit exportiert werden.
Exporte stellen Funktionen oder Objekte anderen Modulen zur Verfügung. In diesem Beispiel habe ich eine Funktion aus der Moduldatei sequence.js
exportiert:
// in sequence.js export { sequence, toList, take };
Das aktuelle Modul kann durch Importe Funktionen oder Objekte aus anderen Modulen verwenden.
import { sequence, toList, toList } from "./sequence";
Bis zu einem gewissen Grad können wir uns ein Modul als eine automatisch ausgeführte Funktion vorstellen, die die importierten Daten als Eingabe verwendet und dann die exportierten Daten zurückgibt.
Funktionsumfang bedeutet, dass in einer Funktion definierte Parameter und Variablen überall innerhalb der Funktion sichtbar sind, jedoch nicht außerhalb der Funktion.
Das Folgende ist eine automatisch ausgeführte Funktion namens IIFE.
(function autoexecute() { let x = 1; })(); console.log(x); //Uncaught ReferenceError: x is not defined
IIFE bedeutet sofortiger Aufruf eines Funktionsausdrucks, einer Funktion, die unmittelbar nach der Definition ausgeführt wird.
Mit var
deklarierte Variablen haben nur einen Funktionsumfang. Darüber hinaus werden mit var
deklarierte Variablen an die Spitze ihres Gültigkeitsbereichs befördert. Auf diese Weise kann auf sie zugegriffen werden, bevor sie deklariert werden. Schauen Sie sich den folgenden Code an:
function doSomething(){ console.log(x); var x = 1; } doSomething(); //undefined
Das passiert in let
nicht. Auf mit let
deklarierte Variablen kann erst nach der Definition zugegriffen werden.
function doSomething(){ console.log(x); let x = 1; } doSomething(); //Uncaught ReferenceError: x is not defined
Variablen, die mit var
deklariert wurden, können mehrmals im selben Gültigkeitsbereich neu deklariert werden:
function doSomething(){ var x = 1 var x = 2; console.log(x); } doSomething();
Variablen, die mit let
oder const
deklariert wurden, können nicht im selben Gültigkeitsbereich erneut deklariert werden:
function doSomething(){ let x = 1 let x = 2; } //Uncaught SyntaxError: Identifier 'x' has already been declared
Vielleicht können wir aufhören, uns darum zu kümmern, weil var
langsam obsolet wird.
Blockbereich wird mit geschweiften Klammern definiert. Es wird durch {
und }
getrennt.
Mit let
und const
deklarierte Variablen können dem Blockbereich unterliegen und nur innerhalb des Blocks, in dem sie definiert sind, darauf zugegriffen werden.
Betrachten Sie den folgenden Code für den let
-Blockbereich:
let x = 1; { let x = 2; } console.log(x); //1
Im Gegensatz dazu sind var
-Deklarationen nicht an den Blockbereich gebunden:
var x = 1; { var x = 2; } console.log(x); //2
Ein weiteres häufiges Problem ist Verwenden einer asynchronen Operation wie setTimeout()
in einer Schleife. Der folgende Schleifencode zeigt die Zahl 5 fünfmal an.
(function run(){ for(var i=0; i<5; i++){ setTimeout(function logValue(){ console.log(i); //5 }, 100); } })();
Eine let
-Schleifenanweisung mit einer for
-Deklaration erstellt bei jeder Schleife eine neue Variable und setzt sie auf den Blockbereich. In der nächsten Codeschleife wird 0 1 2 3 4 5
angezeigt.
(function run(){ for(let i=0; i<5; i++){ setTimeout(function log(){ console.log(i); //0 1 2 3 4 }, 100); } })();
Der lexikalische Geltungsbereich ist die Fähigkeit einer inneren Funktion, auf den äußeren Geltungsbereich zuzugreifen, der sie definiert.
Sehen Sie sich diesen Code an:
(function autorun(){ let x = 1; function log(){ console.log(x); }; function run(fn){ let x = 100; fn(); } run(log);//1 })();
log
Eine Funktion ist ein Abschluss. Es verweist auf die Variable autorun()
aus der übergeordneten Funktion x
und nicht auf die Variable run()
in der Funktion. x
ist der lexikalische Geltungsbereich der Funktion autorun()
. log()
Sehen Sie sich das folgende Beispiel an:
let x0 = 0; (function autorun1(){ let x1 = 1; (function autorun2(){ let x2 = 2; (function autorun3(){ let x3 = 3; console.log(x0 + " " + x1 + " " + x2 + " " + x3);//0 1 2 3 })(); })(); })();Interne Funktion
kann auf lokale autorun3()
-Variablen zugreifen. Auf die Variablen x3
und x1
sowie globale Variablen x2
kann auch von externen Funktionen aus zugegriffen werden. x0
"use strict"; x = 1; console.log(x) //Uncaught ReferenceError: x is not definedDer nicht-strikte Modus wird auch „schlampiger Modus“ genannt, der schnell eine globale Variable erstellt.
x = 1; console.log(x); //1ZusammenfassungVariablen, die im globalen Bereich definiert sind, können überall im Programm verwendet werden.
In einem Modul werden außerhalb von Funktionen deklarierte Variablen ausgeblendet und können nicht in anderen Modulen verwendet werden, es sei denn, sie werden explizit exportiert.
Funktionsbereich bedeutet, dass in einer Funktion definierte Parameter und Variablen überall in der Funktion sichtbar sind.
Mit let
und const
deklarierte Variablen haben einen Blockbereich. var
Kein Blockbereich.
[Verwandte Empfehlungen: JavaScript-Video-Tutorial]
Das obige ist der detaillierte Inhalt vonUmfassende Analyse des JavaScript-Umfangs (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!