Statischer und dynamischer Gültigkeitsbereich von JavaScript anhand von Beispielen erklärt

Statischer und dynamischer Gültigkeitsbereich von JavaScript anhand von Beispielen erklärt

Vorwort

Lassen Sie uns zu Beginn des Artikels einige Konzepte lernen:

  • Geltungsbereich: „Sie kennen JS nicht“ weist darauf hin, dass der Geltungsbereich aus einer Reihe von Regeln besteht, die verwalten, wie die Engine basierend auf Bezeichnernamen im aktuellen Geltungsbereich und in verschachtelten Unterbereichen nach Variablen sucht. Einfach ausgedrückt gibt der Gültigkeitsbereich an, wie nach Variablen gesucht wird.
  • Statischer Gültigkeitsbereich: Auch als lexikalischer Gültigkeitsbereich bekannt. Der Gültigkeitsbereich einer Funktion wird bei der Definition der Funktion festgelegt. Einfach ausgedrückt wird er dadurch bestimmt, wo Sie beim Schreiben von Code die Variablen und Blockgültigkeitsbereiche schreiben.
  • Dynamischer Gültigkeitsbereich: Der Gültigkeitsbereich einer Funktion wird beim Aufruf der Funktion festgelegt.

Statischer Umfang vs. dynamischer Umfang

JavaScript verwendet einen statischen Bereich und der Speicherort der Funktionsdefinition bestimmt den Bereich der Funktion.

Sehen wir uns ein Beispiel an, um den Unterschied zwischen statischem und dynamischem Umfang zu verstehen.

var Wert = 1;
Funktion test() {
    konsole.log(Wert);
}
Funktion bar() {
    var Wert = 2;
    prüfen();
}

Bar();
// sich herausstellen? ? ?

Im obigen Code:

  • Wir definieren zunächst eine globale Variable val und weisen ihr den Wert 1 zu
  • Deklarieren Sie einen Funktionstext. Die Funktion soll den Wert der Variablen val drucken.
  • Deklarieren Sie eine Funktion bar, definieren Sie eine lokale Variable val innerhalb der Funktion, weisen Sie ihr den Wert 2 zu und führen Sie die Funktion test() innerhalb der Funktion aus.
  • Führen Sie die Funktion bar() aus

Ausführungsprozess mit statischem Umfang

Überprüfen Sie beim Ausführen der Testfunktion zunächst, ob die Variable val innerhalb der Testfunktion vorhanden ist. Wenn nicht, suchen Sie an der Stelle, an der die Funktion definiert ist, im Code der vorherigen Ebene und finden Sie die globale Variable val, deren Wert 1 ist.

Die Bereichssuche beginnt zur Laufzeit immer im innersten Bereich und bewegt sich nach außen, bis der erste übereinstimmende Bezeichner gefunden wird.

Unabhängig davon, wo oder wie eine Funktion aufgerufen wird, wird ihr Gültigkeitsbereich nur dadurch bestimmt, wo die Funktion definiert ist.

Dynamischer Bereichsausführungsprozess

Wenn die Testfunktion ausgeführt wird, wird die Variable val zuerst innerhalb der Funktion gesucht. Wenn sie nicht gefunden wird, wird die Variable val im Gültigkeitsbereich der aufrufenden Funktion gesucht, d. h. im Gültigkeitsbereich der Bar-Funktion. Daher ist das Druckergebnis 2.

Übung

Sehen wir uns drei Übungen an, um den statischen Umfang zu erfassen und zu verstehen: Der Umfang wird dadurch bestimmt, wo die Funktion definiert ist.

Übung 1

var a = 1
Funktion fn1(){
    Funktion fn3(){
        var a = 4
        fn2()
    }
    var a = 2
    Rückkehr Fn3
}
Funktion fn2(){
    konsole.log(a)
}
var fn = fn1()
fn()

Im obigen Code:

  • Wir definieren zunächst eine globale Variable a und weisen ihr den Wert 1 zu
  • Deklarieren Sie eine Funktion fn1, deklarieren Sie die Funktion fn3 innerhalb der Funktion, definieren Sie die lokale Variable a, weisen Sie den Wert 2 zu und geben Sie den Wert fn3 zurück
  • Die Funktion fn3 definiert eine lokale Variable a, weist ihr den Wert 4 zu und führt fn2() aus.
  • Deklarieren Sie die Funktion fn2. Die Funktion der Funktion ist es, den Wert eines
  • fn wird der Rückgabewert von fn1() zugewiesen
  • Führen Sie fn() aus (entspricht der Ausführung der Funktion fn3)

Bevor Sie die Fragen beantworten, müssen Sie das Konzept des statischen Umfangs verstehen. In dieser Frage wird fn2 global definiert. Wenn die Variable a in fn2 nicht gefunden werden kann, wird global gesucht, was nichts mit fn1 und fn3 zu tun hat, und 1 ausgegeben.

Übung 2

var a = 1
Funktion fn1(){
    Funktion fn2(){
        konsole.log(a)
    }
    Funktion fn3(){
        var a = 4
        fn2()
    }
    var a = 2
    Rückkehr Fn3
}
var fn = fn1()
fn()

fn2 ist innerhalb der Funktion fn1 definiert. Wenn also keine Variable a innerhalb von fn2 vorhanden ist, wird sie in fn1 gesucht, was nichts mit der Funktion fn3 zu tun hat. Wenn sie in fn1 nicht gefunden werden kann, wird sie auf der vorherigen Ebene (global) gesucht, auf der fn1 definiert ist, bis der erste passende Bezeichner gefunden wird. In dieser Frage können Sie die Variable a in fn1 finden und 2 drucken

Übung 3

var a = 1;
Funktion fn1(){
    Funktion fn3(){
        Funktion fn2(){
            konsole.log(a)
        }
        var a;
        fn2()
        ein = 4
    }
    var a = 2
    Rückkehr Fn3
}
var fn = fn1()
fn()

In dieser Frage ist fn2 in Funktion fn3 definiert. Wenn Variable a in fn2 nicht gefunden werden kann, wird zuerst in fn3 gesucht. Wenn sie immer noch nicht gefunden werden kann, wird in fn1 gesucht. In dieser Frage ist die Variable a in fn3 zu finden, da a jedoch bei der Ausführung von fn2() kein Wert zugewiesen wird, wird „undefined“ ausgegeben.

Zusammenfassen

In Bezug auf den statischen Gültigkeitsbereich von JavaScript müssen wir uns nur einen Satz merken: Der Speicherort der Funktionsdefinition bestimmt den Gültigkeitsbereich der Funktion. Lassen Sie sich bei Fragen nicht von anderen Codes stören.

Dies ist das Ende dieses Artikels über den statischen und dynamischen Umfang von JavaScript. Weitere relevante Inhalte zum statischen und dynamischen Umfang von JS finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

Das könnte Sie auch interessieren:
  • Fortgeschrittene JavaScript-Programmierung: Variablen und Umfang
  • Grafische Erklärung des zugrunde liegenden Prinzips der JavaScript-Bereichskette
  • Javascript-Bereich und Abschlussdetails
  • Synchrone und asynchrone JS-Schwierigkeiten sowie Umfang und Abschluss und detaillierte Erklärung von Prototypen und Prototypenketten
  • Detaillierte Erklärung zur Verwendung von Scoped Slots in Vue.js-Slots
  • Zusammenfassung des JS-Ausführungskontexts und -umfangs
  • Gedanken und Austausch zu Umfangsproblemen in JS

<<:  Wo wird der von IntelliJ IDEA mit Tomcat bereitgestellte Projektspeicherort verwendet?

>>:  So fügen Sie einer großen MySQL-Tabelle eine Spalte hinzu

Artikel empfehlen

Schreiben Sie einen formellen Blog mit XHTML CSS

Der vollständige Name von Blog sollte Weblog sein...

Analyse des Prinzips der Zentrierung von Elementen mit CSS

Es ist eine sehr häufige Anforderung, die horizon...

Detaillierte Erklärung der JS-Array-Methoden

Inhaltsverzeichnis 1. Das ursprüngliche Array wir...

Anwendung von CSS3-Animationseffekten in Aktivitätsseiten

Hintergrund Ehe wir uns versehen, neigt sich ein ...

Vue+openlayer5-Methode zum Abrufen der Koordinaten des aktuellen Mauszeigers

Vorwort: Wie erhält man die Koordinaten der aktue...

Warum Nginx besser ist als Apache

Nginx hat in nur wenigen Jahren den Großteil des ...

Linux /etc/network/interfaces Konfigurationsschnittstellenmethode

Die Datei /etc/network/interfaces wird in Linux z...

Einige Details zu MySQL-Indizes

Vor ein paar Tagen stellte mir ein Kollege eine F...

Installations- und Konfigurationstutorial von MySQL 8.0.16 unter Win10

1. Entpacken Sie MySQL 8.0.16 Der Ordner dada und...