Eine Einführung in den Geltungsbereich von JavaScript

Der Bereich definiert die Lebensdauer und Sichtbarkeit einer Variablen. Variablen sind außerhalb des Bereichs, in dem sie deklariert sind, nicht sichtbar.

JavaScript hat Modulbereich, Funktionsumfang, Blockbereich, lexikalischen Bereich und globalen Bereich.

Globaler Geltungsbereich

Variablen, die außerhalb eines Funktions-, Block- oder Modulbereichs definiert sind, haben einen globalen Bereich. Auf Variablen im globalen Bereich kann von überall in der Anwendung zugegriffen werden.

Wenn ein Modulsystem aktiviert ist, ist es schwieriger, globale Variablen zu erstellen, aber man kann es trotzdem tun. Durch Definieren einer Variablen in HTML außerhalb einer Funktion kann eine globale Variable erstellt werden:

 let GLOBAL_DATA = { value : 1};  console.log(GLOBAL_DATA);

Wenn kein Modulsystem vorhanden ist, ist es viel einfacher, globale Variablen zu erstellen. Eine außerhalb einer Funktion in einer beliebigen Datei deklarierte Variable ist eine globale Variable.

Globale Variablen sind für die Lebensdauer der Anwendung verfügbar.

Eine andere Möglichkeit zum Erstellen einer globalen Variablen besteht darin, das windowglobale Objekt an einer beliebigen Stelle in der Anwendung zu verwenden:

window.GLOBAL_DATA = { value: 1 };

Zu diesem Zeitpunkt ist die GLOBAL_DATAVariable überall sichtbar.

console.log(GLOBAL_DATA)

Wie Sie sich vorstellen können, sind diese Praktiken schlechte Praktiken.

Modulumfang

Vor Modulen war eine außerhalb einer Funktion deklarierte Variable eine globale Variable. In Modulen ist eine außerhalb einer Funktion deklarierte Variable ausgeblendet und steht anderen Modulen nur zur Verfügung, wenn sie explizit exportiert wird.

Durch das Exportieren wird eine Funktion oder ein Objekt anderen Modulen zur Verfügung gestellt. Im nächsten Beispiel exportiere ich eine Funktion aus der sequence.jsModuldatei:

// in sequence.js export { sequence, toList, take };

Durch das Importieren wird dem aktuellen Modul eine Funktion oder ein Objekt aus anderen Modulen zur Verfügung gestellt.

import { sequence, toList, toList } from "./sequence";

In gewisser Weise können wir uns ein Modul als selbstausführende Funktion vorstellen, die die Importdaten als Eingaben verwendet und die Exportdaten zurückgibt.

Funktionsumfang

Funktionsumfang bedeutet, dass in einer Funktion definierte Parameter und Variablen überall innerhalb der Funktion sichtbar sind, jedoch außerhalb der Funktion nicht sichtbar sind.

Betrachten Sie die nächste Funktion, die automatisch ausgeführt wird, IIFE.

(function autoexecute() { let x = 1; })(); console.log(x); //Uncaught ReferenceError: x is not defined

IIFE steht für sofort aufgerufenen Funktionsausdruck und ist eine Funktion, die unmittelbar nach ihrer Definition ausgeführt wird.

Mit deklarierte Variablen varhaben nur Funktionsumfang. varDarüber hinaus werden mit deklarierte Variablen an die Spitze ihres Gültigkeitsbereichs gehoben. Auf diese Weise kann auf sie zugegriffen werden, bevor sie deklariert werden. Schauen Sie sich den folgenden Code an:

function doSomething(){ console.log(x); var x = 1; } doSomething(); //undefined

Dies geschieht nicht für let. Auf eine mit deklarierte Variable letkann erst nach ihrer Definition zugegriffen werden.

function doSomething(){ console.log(x); let x = 1; } doSomething(); //Uncaught ReferenceError: x is not defined

Eine mit deklarierte Variable varkann im selben Bereich mehrmals neu deklariert werden. Der folgende Code ist in Ordnung:

function doSomething(){ var x = 1 var x = 2; console.log(x); } doSomething();

Variablen, die mit demselben Bereich deklariert wurden letoder constnicht erneut deklariert werden können:

function doSomething(){ let x = 1 let x = 2; } //Uncaught SyntaxError: Identifier 'x' has already been declared

Vielleicht müssen wir uns nicht einmal darum kümmern, da vares mittlerweile veraltet ist.

Block Scope

Der Blockumfang wird mit geschweiften Klammern definiert. Es ist durch {und getrennt }.

Variablen, die mit letund constfür den Blockbereich deklariert wurden. Auf sie kann nur in dem Block zugegriffen werden, in dem sie definiert sind.

Betrachten Sie den nächsten Code, der den letBlockumfang betont :

let x = 1; { let x = 2; } console.log(x); //1

Im Gegensatz dazu hat die varDeklaration keinen Blockumfang:

var x = 1; { var x = 2; } console.log(x); //2

Ein weiteres häufiges Problem, wenn kein Blockbereich vorhanden ist, ist die Verwendung einer asynchronen Operation wie setTimeout()in einer Schleife. Der Code der fließenden Schleife zeigt fünfmal die Nummer 5 an.

(function run(){ for(var i=0; i<5; i++){ setTimeout(function logValue(){ console.log(i); //5 }, 100); } })();

Die forSchleifenanweisung mit der letDeklaration erstellt für jede Iteration ein neues Variablengebietsschema für den Blockbereich. Der nächste Schleifencode wird angezeigt 0 1 2 3 4 5.

(function run(){ for(let i=0; i<5; i++){ setTimeout(function log(){ console.log(i); //0 1 2 3 4 }, 100); } })();

Lexikalischer Geltungsbereich

Der lexikalische Bereich ist die Fähigkeit der inneren Funktion, auf den äußeren Bereich zuzugreifen, in dem sie definiert ist.

Betrachten Sie den nächsten Code:

(function autorun(){ let x = 1; function log(){ console.log(x); }; function run(fn){ let x = 100; fn(); } run(log);//1 })();

Die logFunktion ist ein Abschluss. Es verweist auf die xVariable aus der übergeordneten Funktion autorun(), nicht auf die aus der run()Funktion.

Die Schließfunktion hat Zugriff auf den Bereich, in dem sie erstellt wurde, nicht auf den Bereich, in dem sie ausgeführt wurde.

Der lokale Funktionsumfang von autorun()ist der lexikalische log()Funktionsumfang von.

Umfangskette

Every scope has a link to the parent scope. When a variable is used, JavaScript looks down the scope chain until it either finds the requested variable or until it reaches the global scope, which is the end of the scope chain.

Look at the next example:

let x0 = 0; (function autorun1(){ let x1 = 1; (function autorun2(){ let x2 = 2; (function autorun3(){ let x3 = 3; console.log(x0 + " " + x1 + " " + x2 + " " + x3);//0 1 2 3 })(); })(); })();

The autorun3() inner function has access to the local x3 variable. It has also access to the x1 and x2 variables from the outer functions and the x0 global variable.

If it cannot find the variable, it will return an error in strict mode.

"use strict"; x = 1; console.log(x) //Uncaught ReferenceError: x is not defined

In non-strict mode, referred to as “sloppy mode”, it will do a bad thing and create a global variable.

x = 1; console.log(x); //1

Conclusion

Variables defined in global scope are available everywhere in the application.

In a module, a variable declared outside any function is hidden and not available to other modules unless it is explicitly exported.

Function scope means that parameters and variables defined in a function are visible everywhere within the function

Variables declared with let and const have block scope. var doesn’t have block scope.

Discover Functional JavaScript was named one of thebest new Functional Programming books by BookAuthority!

For more on applying functional programming techniques in React take a look atFunctional React.

Learn functional React, in a project-based way, with Functional Architecture with React and Redux.

Follow on Twitter