Dieses Thema wurde schon oft behandelt, dennoch möchte ich darüber sprechen, was Scope (unter Verwendung von JavaScript) aus der Perspektive des Problems ist, das es angehen soll.
Mit zunehmender Größe von Anwendungen nimmt auch ihre Komplexität zu – Scope ist ein Werkzeug zur Bewältigung dieser Komplexität.
Nehmen wir an, wir hätten einen globalen Variablenradius, der auf 7 gesetzt ist, und eine Funktion createSpecialButton(), die eine „spezielle“ Schaltfläche zurückgibt:
let radius = 7; function createSpecialButton(radius) { return } const button = createSpecialButton(radius);
Diese Funktion gibt eine Schaltfläche mit einem bestimmten Radius zurück, der in diesem Fall auf 7 eingestellt ist. Im Moment gibt es kein Problem mit dem Code, da wir wissen, auf welchen Radius eingestellt ist, und daher wissen, wie die resultierende Schaltfläche aussehen wird . Was passiert jedoch, wenn wir zwei weitere Funktionen hinzufügen, die beide von der Radiusvariablen abhängen? Unser Code sieht jetzt so aus:
let radius = 7; function createSpecialButton() { return } function profileButton() { radius = 10; return } function registrationButton() { radius = 16; return } const profileButton = profileButton(); const registrationButton = registrationButton(); const button = createSpecialButton();
Welchen Wert hat der Radius nach dieser Änderung beim Aufruf von createSpecialButton()? Wenn Sie 16 erraten haben, liegen Sie richtig.
Allein durch das Hinzufügen zweier zusätzlicher Funktionen haben wir die Komplexität unseres Codes erheblich erhöht und leben nun in einer Welt, in der mehrere, nicht zusammenhängende Codeteile auf derselben Abhängigkeit basieren. Stellen Sie sich nun vor, dass dies eine viel größere Full-Stack-Anwendung wäre – es würde schnell schwierig werden, darüber nachzudenken, woher bestimmte Zustandsteile kommen und wie Fehler behoben werden können, wenn sie auftreten.
Um dies zu beheben, können wir für jede Funktion separate Radiusvariablen definieren:
function createSpecialButton() { const radius = 7; return } function profileButton() { const radius = 10; return } function registrationButton() { const radius = 16; return } const profileButton = profileButton(); const registrationButton = registrationButton(); const button = createSpecialButton();
Sie könnten sich diese Änderung ansehen und sagen: „Okay, aber jetzt gibt es mehr Code – das scheint nicht richtig zu sein.“ Das ist richtig, es gibt mehr Code, aber weniger Code ist nichtbesser, wenn dadurch weniger wartbarer Code entsteht – die von uns vorgenommene Änderung verbessert die Wartbarkeit unseres Codes, und das ist immer eine gute Sache.
Der globale Geltungsbereich ist für alle in Ihrer gesamten Anwendung zugänglich. Wenn Sie eine Node.JS-App schreiben, werden Sie wahrscheinlich nicht mit dem globalen Bereich arbeiten oder darauf stoßen. Wenn Sie jedoch in einer Web-App arbeiten, können Sie Deklarationen mithilfe eines Skript-Tags oder mithilfe von window.SOMETHING.
in den globalen Bereich einfügenMit dem Skript-Tag könnten Sie beispielsweise Folgendes tun:
Außerdem formuliert MDN seine Definition des „globalen Bereichs“ als „Der Standardbereich für den gesamten Code, der im Skriptmodus ausgeführt wird“. Ichglaube, dass sie sich auf das obige Beispiel beziehen.
Bei Verwendung des globalen Fensterobjekts könnten Sie etwa Folgendes tun:
window.username = "Garrett";
Wenn Sie in einem Node.JS-Projekt arbeiten, ist der Modulumfang das, womit Sie auf höchster Ebene arbeiten. Jede Datei mit der Erweiterung .js (oder .ts) ist ein separates Modul, was bedeutet, dass Ihre Deklarationen höchstens für alles in einer bestimmten Datei zugänglich sind, es sei denn, Sie exportieren sie explizit.
Beispielsweise können in user.ts beide Funktionen auf den Variablennamen zugreifen.
// user.ts const name = "Garrett"; function greet() { console.log("Hello, ", name) } function greetAgain() { console.log("Hello again, ", name) }
In dieser Version von user.ts kann jedoch nur accessName() auf den Variablennamen zugreifen:
// user.ts function greet() { const name = "Garrett"; console.log("Hello, ", name) } function greetAgain() { console.log("Hello again, ", name) }
Beachten Sie, dass in beiden Modulen nichts exportiert wird. Mit anderen Worten: Code in anderen Modulen hat keine Möglichkeit, diesen Code zu kennen und kann ihn daher nicht importieren und verwenden. Wir können das aber ändern:
// user.ts export function greet(name: string) { console.log("Hello, ", name) }
Jetzt werden beide Funktionen exportiert und können somit von anderen Modulen genutzt werden. Dies unterscheidet sich technisch von dem Konzept des globalen Geltungsbereichs, über das wir zuvor gesprochen haben. Es ähnelt jedoch darin, dass wir Code für die gesamte Anwendung verfügbar machen, indem wir ihn von einem Modul in ein anderes importieren.
Den Funktionsumfang haben wir eigentlich schon gesehen. Schauen Sie sich den Code unten an (es ist derselbe Code aus einem der obigen Snippets):
// user.ts function greet() { const name = "Garrett"; console.log("Hello, ", name) } function greetAgain() { console.log("Hello again, ", name) }
Versuchen Sie es, dies auszuführen – GreetAgain() wird einen Fehler ausführen, da die Namensvariable, die es zu lesen versucht, nur im Kontext (d. h. „Bereich“) von Greet() existiert.
Hinweis: Dies wird möglicherweise als „lokaler Geltungsbereich“ bezeichnet.
Der Blockbereich ist interessant, da er nur mit neueren Variablentypen funktioniert – insbesondere let und const, nicht var. Werfen wir einen Blick darauf.
{ let firstName = "Garrett"; const lastName = "Love"; var fullName = "Garrett Love"; // firstName and lastName CAN be accessed here // fullName CAN be accessed here } // firstName and lastName CANNOT be accessed here // fullName CAN STILL be accessed here
Im obigen Beispiel können wir sehen, dass 1) durch das Platzieren von Code innerhalb eines {} ein Codeblock erstellt wird. 2) Auf die mit let und const definierten Variablen kann nur innerhalb dieses Codeblocks zugegriffen werden. 3) Die mit var erstellte Variable folgt nicht den Regeln des Blockbereichs, da auf sie weiterhin außerhalb von {}.
zugegriffen werden kannHinweis: Modernes JavaScript verwendet let und const für Variablendeklarationen und nicht für var.
Denken Sie abschließend daran, dass der Bereich ein Werkzeug zum Verwalten der Komplexität in unserem Code ist. Je weiter oben auf der Ebene des Bereichs Sie Deklarationen platzieren, desto komplexer wird Ihr Code sein. Daher ist es am besten, die Platzierung von Deklarationen anzustreben im kleinsten notwendigen Umfang.
Das obige ist der detaillierte Inhalt vonUmfang in JavaScript verstehen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
