Bevezetés a JavaScript hatókörébe

A hatókör meghatározza a változó élettartamát és láthatóságát. A változók a deklarált hatókörön kívül nem láthatók.

A JavaScript rendelkezik modul hatókörrel, függvény hatókörrel, blokk hatókörrel, lexikális hatókörrel és globális hatókörrel.

Globális hatály

A függvények, blokkok vagy modulok hatókörén kívül definiált változók globális hatókörrel rendelkeznek. A globális hatókörű változók az alkalmazás minden részéről elérhetők.

Ha egy modulrendszer engedélyezve van, nehezebb globális változót készíteni, de mégis megteheti. Ha egy változót HTML-ben definiálunk, bármilyen függvényen kívül, létrehozhatunk egy globális változót:

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

Ha nincs modulrendszer, sokkal könnyebb globális változókat létrehozni. A függvényen kívül, bármely fájlban deklarált változó globális változó.

Globális változók állnak rendelkezésre az alkalmazás élettartama alatt.

A globális változó létrehozásának másik módja a windowglobális objektum használata az alkalmazás bárhol:

window.GLOBAL_DATA = { value: 1 };

Ezen a ponton a GLOBAL_DATAváltozó mindenhol látható.

console.log(GLOBAL_DATA)

Ahogy el lehet képzelni, ezek a gyakorlatok rossz gyakorlatok.

A modul hatóköre

A modulok előtt a függvényen kívül deklarált változó globális változó volt. A modulokban a függvényen kívül deklarált változó rejtve van, és más modulok számára nem elérhető, hacsak nem kifejezetten exportálják.

Az exportálás egy funkciót vagy objektumot elérhetővé tesz más modulok számára. A következő példában exportálok egy függvényt a sequence.jsmodul fájlból:

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

Az importálás funkciót vagy objektumot más modulokból teszi elérhetővé az aktuális modul számára.

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

Bizonyos értelemben elképzelhetjük, hogy egy modul önállóan végrehajtó függvény, amely az importálási adatokat bemenetként veszi fel, és az exportadatokat adja vissza.

Funkció hatóköre

A függvény hatóköre azt jelenti, hogy a függvényben definiált paraméterek és változók a függvényen belül mindenhol láthatók, de a függvényen kívül nem láthatók.

Vizsgáljuk meg a következő, automatikusan végrehajtott funkciót, az úgynevezett IIFE-t.

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

Az IIFE az Azonnal meghívott funkciókifejezést jelenti, és egy olyan funkció, amely a definíciója után azonnal fut.

A dátummal deklarált változóknak varcsak a függvényköre van. Sőt, a -vel deklarált változókat vara hatókörük tetejére emelik. Így a bejelentés előtt hozzájuk lehet hozzáférni. Vessen egy pillantást az alábbi kódra:

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

Ez nem történik meg let. A -vel deklarált változóhoz letcsak annak meghatározása után lehet hozzáférni.

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

A változóval deklarált változó varugyanazon hatókörben többször is deklarálható. A következő kód rendben van:

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

Azokkal a változókkal deklarált letvagy constnem deklarálható változók ugyanazon hatókörben:

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

Lehet, hogy nem is kell ezzel törődnünk, mivel varaz már elavulttá vált.

Blokk hatálya

A blokk hatókörét göndör zárójelekkel határozzuk meg. Ez választja el {, és }.

Azokkal a változókkal, amelyek deklaráltak letés constblokk hatókörrel rendelkezhetnek. Csak abban a blokkban lehet hozzájuk férni, amelyben meghatározták őket.

Tekintsük a következő kódot, amely a letblokk hatókörét hangsúlyozza :

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

Ezzel szemben a varnyilatkozatnak nincs blokk hatálya:

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

Egy másik gyakori probléma a blokk hatókörének hiányával az aszinkron műveletek használata, mint setTimeout()egy hurokban. Az áramló hurok kód ötször mutatja az 5-ös számot.

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

A forciklus utasítás a letdeklarációval egy új változó területi beállítást hoz létre a blokk hatókörében, minden iterációhoz. A következő hurok kód megmutatja 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); } })();

Lexikai hatály

A lexikális hatókör a belső funkció azon képessége, hogy hozzáférjen a külső hatókörhöz, amelyben meghatározták.

Vegyük fontolóra a következő kódot:

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

A logfunkció egy bezárás. A xváltozót a szülőfüggvényéből nevezi autorun(), nem pedig a run()függvényből.

A bezárás funkcióhoz hozzáférési lehetősége van annak létrehozásának hatóköréhez, és nem ahhoz a körhöz, amelyben végrehajtották.

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.

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