Čo sú uzávery JavaScriptu a ako ich píšete?

JavaScript je jedným z najnáročnejších programovacích jazykov na zvládnutie. Niekedy dokonca ani starší vývojári nie sú schopní predpovedať výstup kódu, ktorý napísali. Jedným z mätúcich konceptov v JavaScripte sú uzávery. Začiatočníci zvyčajne zakopnú o tento koncept – nebojte sa. Tento článok vás pomaly prevedie základnými príkladmi, ktoré vám pomôžu lepšie porozumieť uzáverom. Začnime.

Čo sú uzávery?

Uzáver je štruktúra funkcie a jej lexikálneho prostredia vrátane všetkých premenných v rozsahu funkcie pri vytváraní uzáveru. Zjednodušene povedané, zvážte vonkajšiu funkciu a vnútornú funkciu. Vnútorná funkcia bude mať prístup k rozsahu vonkajšej funkcie.

Predtým, ako sa pozriete na niektoré príklady uzávierky JavaScriptu, musíte pochopiť lexikálny rozsah.

Čo je to lexikálne prostredie?

Lexikálne prostredie je lokálna pamäť spolu s jej nadradeným prostredím. Pozrite si príklad uvedený nižšie a uhádnite výstup nasledujúceho kódu:

function external(){ 
 nech a = 10;
 console.log (y);
 vnútorné();
 function inner(){
 console.log (a);
 console.log (y);
 }
}
nech y = 9;
vonkajšie();

Výstupom bude 9, 10, 9. Vnútorná funkcia má prístup k premenným svojho rodiča, the vonkajšie() funkciu. Preto, vnútorné () funkcia môže pristupovať premenná a. The vnútorné () funkcia môže tiež pristupovať premenné y kvôli konceptu rozsahová reťaz.

Rodič vonkajšej funkcie je globálny a rodič funkcie vnútorné () funkcia je vonkajšie() funkciu. Preto, vnútorné () funkcia má prístup k premenným svojich rodičov. Ak sa pokúsite získať prístup k premennej a v globálnom rozsahu zobrazí chybu. Dá sa teda povedať, že vnútorné () funkcia je lexikálne vo vnútri vonkajšie() funkcie a lexikálneho rodiča vonkajšie() funkcia je globálna.

Príklady uzavretia JavaScriptu vysvetlené

Keďže ste sa naučili o lexikálnom prostredí, môžete ľahko uhádnuť výstup nasledujúceho kódu:

funkcia a(){
 nech x = 10;
 funkcia b(){
 console.log (x);
 }
 b();
}
a();

Výstupom je 10. Aj keď to možno na prvý pohľad neuhádnete, toto je príklad uzavretia v JavaScripte. Uzávery nie sú nič iné ako funkcia a ich lexikálne prostredie.

Zoberme si príklad, kde sú tri funkcie vnorené do seba:

funkcia a(){ 
 nech x = 10;
 funkcia b(){ 
 funkcia c(){
 funkcia d(){
 console.log (x);
 }
 d();
 }
 c();
 }
 b();
}
a();

Bude sa to stále nazývať uzáver? Odpoveď znie: áno. Opäť platí, že uzáver je funkcia s jej lexikálnym rodičom. Lexikálny rodič funkcie d() je c(), a vzhľadom na koncepciu reťazca rozsahu, funkcie d() má prístup ku všetkým premenným vonkajších funkcií a globálnych funkcií.

Pozrite si ďalší zaujímavý príklad:

funkcia x(){
 nech a = 9;
 návratová funkcia y(){
 console.log (a); 
 }
}
nech b = x();

Môžete vrátiť funkciu vo vnútri funkcie, priradiť funkciu premennej a odovzdať funkciu vnútri a funkciu v JavaScripte. Toto je krása jazyka. Môžete uhádnuť, aký bude výstup, ak vytlačíte premennú b? Bude fungovať tlač y(). Funkcia X() vráti funkciu y(). Preto premenná b ukladá funkciu. Teraz môžete hádať, čo sa stane, ak zavoláte premennú b? Vypíše hodnotu premennej a: 9.

Skrytie údajov môžete dosiahnuť aj pomocou uzáverov. Pre lepšie pochopenie zvážte príklad s tlačidlom, ktoré má v prehliadači ID s názvom „button“. K tomu pripojíme poslucháč udalosti kliknutia.

Teraz musíte vypočítať počet kliknutí na tlačidlo. Existujú dva spôsoby, ako to urobiť.

1. Vytvorte globálny počet premenných a zvýšte ho po kliknutí. Ale táto metóda má chybu. Je ľahké vykonávať úpravy v globálnych premenných, pretože sú ľahko dostupné.

   Klikni na mňa
   
   

2. Pomocou uzáverov môžeme dosiahnuť skrytie údajov. Môžete zabaliť celé addEventListener() funkcia vo vnútri funkcie. Robí uzáver. A po vytvorení uzáveru môžete vytvoriť a počet premenná a zvýšiť jeho hodnotu onclick. Pri použití tejto metódy zostane premenná v funkčný rozsaha nie je možné vykonať žiadne úpravy.

   Klikni na mňa
   
   

Súvisiace: Skrytý hrdina webových stránok: Pochopenie DOM

Prečo sú uzávery dôležité?

Uzávery sú veľmi dôležité nielen pokiaľ ide o JavaScript, ale aj v iných programovacích jazykoch. Sú užitočné v mnohých scenároch, kde môžete okrem iného vytvárať premenné v ich súkromnom rozsahu alebo kombinovať funkcie.

Zvážte tento príklad zloženia funkcie:

const multiply = (a, b) => a*b;
const multiplyBy2 = x => multiply (10, x);
console.log (multiplyBy2(9));

Rovnaký príklad môžeme implementovať pomocou uzáverov:

const multiply = funkcia (a){
 návratová funkcia (b){
 návrat a*b
 }
}
const multiplyBy2 = multiply (2);
console.log (multiplyBy2(10))

Funkcie môžu používať uzávery v nasledujúcich scenároch:

1. Implementovať funkciu currying
2. Používa sa na skrytie údajov
3. Na použitie s prijímačmi udalostí
4. Používa sa v metóde setTimeout()

Uzávery by ste nemali používať zbytočne

Odporúča sa vyhnúť sa zatvoreniam, pokiaľ to nie je skutočne potrebné, pretože môžu znížiť výkon vašej aplikácie. Použitie uzáveru bude stáť veľa pamäte a ak sa s uzávermi nebude správne zaobchádzať, môže to viesť k úniky pamäte.

Uzavreté nad premennými neuvoľní zberač odpadu JavaScript. Keď použijete premenné vo vnútri uzáverov, zberač odpadu neuvoľní pamäť, pretože prehliadač má pocit, že premenné sa stále používajú. Preto tieto premenné spotrebúvajú pamäť a znižujú výkon aplikácie.

Tu je príklad, ktorý ukazuje, ako sa premenné vo vnútri uzáverov nebudú zhromažďovať.

 funkcia f(){
 const x = 3;
 return function inner(){
 console.log (x);
 }
 }
 f()();

The premenná x tu spotrebúva pamäť, aj keď sa často nepoužíva. Zberač odpadu nebude môcť uvoľniť túto pamäť, pretože je vo vnútri uzáveru.

JavaScript je nekonečný

Zvládnutie JavaScriptu je nekonečná úloha, pretože existuje toľko konceptov a rámcov, ktoré zvyčajne skúsení vývojári sami nepreskúmajú. Svoju ovládateľnosť JavaScriptu môžete výrazne zlepšiť tým, že sa naučíte základy a budete ich často precvičovať. Iterátory a generátory sú niektoré z pojmov, ktoré rozhovory vyžadujú počas rozhovorov v jazyku JavaScript.

Úvod do iterátorov a generátorov v JavaScripte

Zoznámte sa s metódami iterátora a generátora v JS.

Prečítajte si ďalej

O autorovi