Den Umfang in JavaScript verstehen

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.

Welches Problem löst Scope eigentlich?

Mit zunehmender Größe von Anwendungen nimmt auch ihre Komplexität zu – Scope ist ein Werkzeug zur Bewältigung dieser Komplexität.

Kopplung vs. Entkopplung

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 <button radius={radius}>Click Me!</button>
}

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, was die resultierende Schaltfläche bewirkt aussehen. 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 <button radius={radius}>Click Me!</button>
}

function profileButton() {
  radius = 10;
  return <button radius={radius}>Click Me!</button>
}

function registrationButton() {
  radius = 16;
  return <button radius={radius}>Click Me!</button>
}

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 von zwei zusätzlichen 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, dies wäre eine viel größere Full-Stack-Anwendung – 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 <button radius={radius}>Click Me!</button>
}

function profileButton() {
  const radius = 10;
  return <button radius={radius}>Click Me!</button>
}

function registrationButton() {
  const radius = 16;
  return <button radius={radius}>Click Me!</button>
}

const profileButton = profileButton();
const registrationButton = registrationButton();
const button = createSpecialButton();

Sie könnten sich diese Änderung ansehen und sagen: „Na ja, ok, aber jetzt gibt es mehr Code – das scheint nicht richtig zu sein.“ Das ist richtig, es gibt mehr Code, aber weniger Code ist nicht besser, wenn dadurch weniger wartbarer Code entsteht – die von uns vorgenommene Änderung verbessert die Wartbarkeit unseres Codes, und das ist immer eine gute Sache.

Arten von Bereichen in JavaScript

Globaler Geltungsbereich

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ügen

Mit dem Skript-Tag könnten Sie beispielsweise Folgendes tun:

<script>
  let username = "Garrett";
</script>

Außerdem formuliert MDN seine Definition des „globalen Bereichs“ als „Der Standardbereich für den gesamten Code, der im Skriptmodus ausgeführt wird.“ Ich glaubedas obige Beispiel ist das, worauf sie sich beziehen.

Bei Verwendung des globalen Fensterobjekts könnten Sie etwa Folgendes tun:

  window.username = "Garrett";

Modulumfang

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.

Zum Beispiel 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.

Funktionsumfang

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, dies auszuführen – „greetAgain()“ führt zu einem Fehler, da die Namensvariable, die es zu lesen versucht, nur im Kontext (d. h. „Bereich“) von „greet()“ existiert.

Hinweis: Dies wird möglicherweise als „lokaler Bereich“ bezeichnet.

Blockbereich

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 immer noch außerhalb von {} zugegriffen werden kann.

Hinweis: Modernes JavaScript verwendet let und const für Variablendeklarationen und nicht für var.

Erklärungen sollten im kleinstmöglichen Rahmen erfolgen

Denken Sie abschließend daran, dass der Bereich ein Werkzeug zum Verwalten der Komplexität in unserem Code ist. Je weiter oben in der Ebene des Bereichs Sie Deklarationen platzieren, desto komplexer wird Ihr Code sein. Daher ist es am besten, Deklarationen anzustreben im kleinsten notwendigen Umfang platziert werden.

Das obige ist der detaillierte Inhalt vonDen Umfang in JavaScript verstehen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!