En introduktion til anvendelsesområdet i JavaScript

Scope definerer levetiden og synligheden af ​​en variabel. Variabler er ikke synlige uden for det anvendelsesområde, de erklæres for.

JavaScript har modulomfang, funktionsomfang, blokomfang, leksikalt omfang og globalt omfang.

Globalt anvendelsesområde

Variabler defineret uden for enhver funktions-, blok- eller modulomfang har globalt omfang. Variabler i globalt omfang kan tilgås fra overalt i applikationen.

Når et modulsystem er aktiveret, er det sværere at lave globale variabler, men man kan stadig gøre det. Ved at definere en variabel i HTML uden for enhver funktion kan der oprettes en global variabel:

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

Når der ikke er noget modulsystem på plads, er det meget lettere at oprette globale variabler. En variabel, der er erklæret uden for enhver funktion, i enhver fil, er en global variabel.

Globale variabler er tilgængelige i applikationens levetid.

En anden måde at oprette en global variabel på er at bruge det windowglobale objekt hvor som helst i applikationen:

window.GLOBAL_DATA = { value: 1 };

På dette tidspunkt er GLOBAL_DATAvariablen synlig overalt.

console.log(GLOBAL_DATA)

Som du kan forestille dig, er denne praksis dårlig praksis.

Modulomfang

Før moduler var en variabel, der blev erklæret uden for enhver funktion, en global variabel. I moduler er en variabel, der er erklæret uden for enhver funktion, skjult og ikke tilgængelig for andre moduler, medmindre den eksplicit eksporteres.

Eksport gør en funktion eller et objekt tilgængeligt for andre moduler. I det næste eksempel eksporterer jeg en funktion fra sequence.jsmodulfilen:

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

Import gør en funktion eller et objekt fra andre moduler tilgængeligt for det aktuelle modul.

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

På en måde kan vi forestille os et modul som en selvudførende funktion, der tager importdataene som input og returnerer eksportdataene.

Funktionsomfang

Funktionsomfang betyder, at parametre og variabler, der er defineret i en funktion, er synlige overalt i funktionen, men ikke er synlige uden for funktionen.

Overvej den næste funktion, der automatisk udføres, kaldet IIFE.

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

IIFE står for Immediately Invoked Function Expression og er en funktion, der kører umiddelbart efter dens definition.

Variabler, der er deklareret med, varhar kun funktionsomfang. Endnu mere varhejses variabler, der er erklæret med , til toppen af ​​deres anvendelsesområde. På denne måde kan de tilgås, inden de erklæres. Se koden nedenfor:

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

Dette sker ikke for let. En variabel, der er erklæret med, leter kun tilgængelig efter dens definition.

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

En variabel, der er deklareret med, varkan deklareres flere gange i samme omfang. Følgende kode er fint:

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

Variabler, der er deklareret med leteller constikke kan deklareres i samme omfang:

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

Måske behøver vi ikke engang bekymre os om dette, da det varer begyndt at blive forældet.

Bloker anvendelsesområde

Blokomfang defineres med krøllede seler. Det adskilles af {og }.

Variabler deklareret med letog constkan have blokomfang. De kan kun fås i den blok, hvori de er defineret.

Overvej den næste kode, der understreger letblokområdet:

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

Derimod har varerklæringen intet blokområde:

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

Another common problem with not having block scope is the use of an asynchronous operation like setTimeout() in a loop. The flowing loop code displays the number 5, five times.

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

The for loop statement, with the let declaration, creates a new variable locale to the block scope, for each iteration. The next loop code shows 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); } })();

Lexical Scope

Lexical scope is the ability of the inner function to access the outer scope in which it is defined.

Consider the next code:

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

The log function is a closure. It refers the x variable from its parent function autorun(), not the one from the run() function.

The closure function has access to the scope in which it was created, not the scope in which it was executed.

The local function scope of autorun() is the lexical scope of the log() function.

Scope chain

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.

I et modul er en variabel, der er erklæret uden for enhver funktion, skjult og ikke tilgængelig for andre moduler, medmindre den eksplicit eksporteres.

Funktionsomfang betyder, at parametre og variabler, der er defineret i en funktion, er synlige overalt i funktionen

Variabler deklareret med letog consthar blokomfang. varhar ikke blokomfang.

Discover Functional JavaScript blev udnævnt til et afbedste nye funktionelle programmeringsbøger fra BookAuthority !

For mere om anvendelse af funktionelle programmeringsteknikker i React, se på Functional React .

Lær funktionel reaktion på en projektbaseret måde med funktionel arkitektur med React og Redux .

Følg på Twitter