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.

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.

Modulumfang

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

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

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);
  }
})();

Lexikalischer Geltungsbereich

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

Eine Abschlussfunktion hat Zugriff auf den Bereich, in dem sie erstellt wurde, nicht auf ihren eigenen Bereich. Der lokale Funktionsumfang von

ist der lexikalische Geltungsbereich der Funktion autorun(). log()

Bereichskette

Jeder Bereich hat einen Link zum übergeordneten Bereich. Bei der Verwendung von Variablen durchsucht JavaScript die Bereichskette, bis es die angeforderte Variable findet oder den globalen Bereich (d. h. das Ende der Bereichskette) erreicht.

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

Es wird im strikten Modus ein Fehler zurückgegeben, wenn die Variable nicht gefunden wird.

"use strict";
x = 1;
console.log(x)
//Uncaught ReferenceError: x is not defined

Der nicht-strikte Modus wird auch „schlampiger Modus“ genannt, der schnell eine globale Variable erstellt.

x = 1;
console.log(x); //1

Zusammenfassung

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