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

Verwendung des MySQL-Zeitstempels

Vorwort: Zeitstempelfelder werden häufig in MySQL...

Kleines Problem mit dem Abstand zwischen Label und Eingabe im Google Browser

Erst Code, dann Text Code kopieren Der Code lautet...

So kapseln Sie die Rich-Text-Komponente von WangEditor in Angular

Die Rich-Text-Komponente ist eine sehr häufig ver...

Schreiben Sie ein MySQL-Datensicherungsskript mithilfe der Shell

Ideen Eigentlich ist es ganz einfach Schreiben Si...

Installations-Tutorial für die ZIP-Archivversion von MySQL 5.7

In diesem Artikel finden Sie das Installations-Tu...

Layim in Javascript, um Freunde und Gruppen zu finden

Derzeit haben die Verantwortlichen von Layui die ...

So aktualisieren Sie https unter Nginx

Kaufzertifikat Sie können es beim Cloud Shield Ce...

Gemessenes Bild - HTTP-Anforderung

Bitte öffnen Sie die Testseite in einem gängigen ...

Vue verwendet Drag & Drop, um einen Strukturbaum zu erstellen

In diesem Artikelbeispiel wird der spezifische Co...

Tiefgreifendes Verständnis der logischen Architektur von MySQL

MySQL ist heute die Datenbank, die von den meiste...

Rendern im Vue-Scaffolding verstehen

Im Vue-Gerüst können wir sehen, dass im neuen Vue...