Javascript-Bereich und Abschlussdetails

1. Geltungsbereich

Vereinfacht ausgedrückt bezeichnet der Gültigkeitsbereich den Bereich in einem Programm, in dem Variablen definiert werden und der die Zugriffsrechte des aktuell ausgeführten Codes auf die Variablen bestimmt.

In ES5 gibt es im Allgemeinen nur zwei Bereichstypen:

• Globaler Geltungsbereich: Der globale Geltungsbereich ist der äußerste Geltungsbereich des Programms und existiert immer
• Funktionsumfang: Ein Funktionsumfang wird nur erstellt, wenn eine Funktion definiert ist und im übergeordneten Funktionsumfang oder im globalen Umfang enthalten ist.

Nachdem wir das Konzept besprochen haben, schauen wir uns den folgenden Code an:

var a = 100
Funktionstest () {
    var b = a * 2
    var a = 200
    var c = a/2
    console.log(b)
    console.log(c)
}
test() // Was wird hier ausgedruckt?

Analyse:

• Erstens bildet dieser Code einen globalen Bereich und einen Funktionsumfang
• Es gibt eine Variable a im globalen Bereich mit einem Wert von 100
• Die lokalen Variablen b, a und c werden im Gültigkeitsbereich der Testfunktion definiert.
• Hier gibt es eine Variablenpromotion. Die Variablenpromotion wird zuerst im Funktionsumfang durchgeführt: var b; var a; var c;
• Weisen Sie dann b einen Wert zu. Zu diesem Zeitpunkt wurde a noch kein Wert zugewiesen, daher ist der Wert von a undefiniert. Dann wird a*2 hinzugefügt, sodass b NaN ist.
• Weisen Sie dann a einen Wert von 200 und c einen Wert von a/2 zu, also 100.

Es wird also NaN, 100 ausgegeben

In ES6 wird ein neuer Blockbereich hinzugefügt

Einfach ausgedrückt ist der Bereich innerhalb der geschweiften Klammern {...} der Blockbereich, aber Javascript unterstützt den Blockbereich nicht nativ. Sie müssen die von ES6 vorgeschlagenen let und const verwenden, um den Blockbereich zu erstellen.

// ES5
wenn(wahr) {
  Variablenname = "Nanjiu"
}
console.log(Name) // Nanjiu // ES6
wenn(wahr) {
  lass Alter = 18
}
console.log(Alter) // Dies meldet einen Fehler

2. Geltungsbereichskette

Beim Zugriff auf eine Variable innerhalb des ausführbaren Codes wird zunächst geprüft, ob die Variable im aktuellen Gültigkeitsbereich vorhanden ist. Wenn dies der Fall ist, wird sofort eine Rückgabe vorgenommen. Wenn nicht, wird im übergeordneten Gültigkeitsbereich gesucht, bis der globale Gültigkeitsbereich gefunden wird. Wir nennen diesen Bereichsverschachtelungsmechanismus作用域鏈

3. Lexikalischer Umfang

詞法作用域ist ein Arbeitsmodell des Gültigkeitsbereichs. Der lexikalische Gültigkeitsbereich ist ein Gültigkeitsbereichstyp, der in JavaScript verwendet wird. Der lexikalische Gültigkeitsbereich kann auch als靜態作用域bezeichnet werden.

Der sogenannte lexikalische Gültigkeitsbereich wird dadurch bestimmt, wo Sie beim Schreiben des Codes die Variablen und Gültigkeitsbereiche schreiben. Das heißt, der lexikalische Gültigkeitsbereich ist ein statischer Gültigkeitsbereich, der beim Schreiben des Codes bestimmt wird. Der Gültigkeitsbereich einer Funktion wird durch den Ort bestimmt, an dem sie deklariert wird, und nicht durch den Ort, an dem sie tatsächlich aufgerufen wird.

MDN definiert Closures wie folgt:

Eine Funktion wird mit einer Referenz auf ihre Umgebung (lexikalische Umgebung) gebündelt (oder die Funktion wird von Referenzen umgeben). Eine solche Kombination nennt man closure .

Mit anderen Worten: Closures ermöglichen Ihnen, von innerhalb einer inneren Funktion auf den Gültigkeitsbereich einer äußeren Funktion zuzugreifen. Wenn in JavaScript eine Funktion erstellt wird, wird gleichzeitig mit der Funktion auch ein Abschluss erstellt.

Wir können Folgendes schlussfolgern:

閉包= 函數+ 外層作用域

Schauen wir uns zunächst den Code an:

var name = "Front-End Nanjiu"

Funktion say() {
  console.log(Name)
}
sagen()

Analyse: Die Funktion say kann im äußeren Gültigkeitsbereich auf die Variable a zugreifen. Stellt dies also keinen Abschluss dar?

Im Buch „Javascript Definitive Guide“ gibt es einen Satz: Streng genommen sind alle JavaScript Funktionen Closures.

Dies ist jedoch nur ein theoretischer Verschluss, der sich von dem unterscheidet, was wir normalerweise verwenden. Das obige Beispiel ist nur ein einfacher Abschluss.

ECMAScript definiert Closures wie folgt:

• Theoretisch: Alle Funktionen sind Closures. Denn diese haben bei ihrer Erstellung bereits die Daten des übergeordneten Kontextes gespeichert.
• In der Praxis sollte ein Abschluss zwei Bedingungen erfüllen: 1. Auf die Variablen des äußeren Bereichs wird im Code verwiesen. 2. Er existiert weiterhin, auch wenn der Kontext, in dem er erstellt wurde, zerstört wird.
  

Schauen wir uns einen weiteren Codeabschnitt aus dem JavaScript Definitive Guide an:

let Umfang = "globaler Umfang"
Funktion checkscope(){
  let scope = "lokaler Bereich"
  Funktion f(){
    Rückgabebereich
  }
  Rückkehr f
}

lass s = checkscope()   
s() // Was gibt das zurück?

Viele Studenten denken vielleicht, dass es sich um global scope handelt, aber ist das wirklich so? Werfen wir einen Blick auf den Ausführungsprozess:

• Führen Sie zunächst den globalen Code aus, erstellen Sie einen globalen Ausführungskontext, definieren Sie den globalen scope und weisen Sie ihm einen Wert zu
• Deklarieren Sie die checkscope -Funktion, erstellen Sie den Ausführungskontext der Funktion, erstellen Sie den lokalen scope und weisen Sie einen Wert zu
• Deklarieren Sie die f-Funktion und erstellen Sie den Ausführungskontext der Funktion
• Führen Sie die Funktion checkscope aus, die eine f-Funktion zurückgibt und sie der Variablen s zuweist.
• Das Ausführen der s-Funktion entspricht dem Ausführen der f-Funktion. scope ist local scope . Was den local scope betrifft, so haben wir über lexikalische

Grundlegende Regeln zum Gültigkeitsbereich: JavaScript -Funktionen werden in dem Gültigkeitsbereich ausgeführt, in dem sie definiert sind. Im Bereich, in dem die Funktion f definiert ist, ist der Wert des scope local scope

5. Anwendung der Schließung

Closures werden hauptsächlich zur Verwaltung interner Variablen verwendet.

6. Die Mängel von Verschlüssen

• Da das Vorhandensein von Abschlüssen dazu führen kann, dass Variablen im Speicher verbleiben, kann eine unsachgemäße Verwendung zu Speicherlecks führen
• Speicherlecks können dazu führen, dass Ihre App einfriert oder abstürzt

7. Häufig gestellte Fragen zum Abschlussgespräch

var arr = []
für(var i=0;i<3;i++){
    arr[i] = Funktion(){
        Konsole.log(i)
    } 
}
arr[0]() // 3
arr[1]() // 3
arr[2]() // 3
// Hier ist i während der Ausführung zu 3 geworden

// Mit Closure lösen var arr = []
für(var i=0;i<3;i++){
    arr[i] = (Funktion(i){
        Rückgabefunktion(){
            Konsole.log(i)
        } 
    })(ich)
    
}
arr[0]() // 0
arr[1]() // 1
arr[2]() // 2

Dies ist das Ende dieses Artikels über Javascript-Umfang und -Abschlussdetails. Weitere Informationen zu Javascript-Umfang und -Abschluss finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!