Što su JavaScript zatvaranja i kako ih pišete?

JavaScript je jedan od najzahtjevnijih programskih jezika za savladavanje. Ponekad čak ni stariji programeri nisu u stanju predvidjeti izlaz koda koji su napisali. Jedan od zbunjujućih koncepata u JavaScriptu su zatvaranja. Početnici se obično spotaknu na koncept - ne brinite. Ovaj će vas članak polako provesti kroz osnovne primjere kako biste bolje razumjeli zatvaranja. Započnimo.

Što su zatvaranja?

Zatvaranje je struktura funkcije i njezino leksičko okruženje, uključujući sve varijable u opsegu funkcije pri kreiranju zatvaranja. Jednostavnije rečeno, razmotrite vanjsku funkciju i unutarnju funkciju. Unutarnja funkcija imat će pristup opsegu vanjske funkcije.

Prije nego pogledate neke primjere zatvaranja JavaScripta, morat ćete razumjeti leksički opseg.

Što je leksičko okruženje?

Leksičko okruženje je lokalna memorija zajedno sa svojim roditeljskim okruženjem. Pogledajte primjer naveden u nastavku i pogodite izlaz sljedećeg koda:

funkcija vanjska(){ 
 neka je a = 10;
 console.log (y);
 unutarnji();
 funkcija inner(){
 console.log (a);
 console.log (y);
 }
}
neka je y = 9;
vanjski();

Izlaz će biti 9, 10, 9. Unutarnja funkcija ima pristup varijablama svog roditelja, the vanjski() funkcija. Dakle, unutarnji() funkcija može pristupiti varijabla a. The unutarnji() funkcija također može pristupiti varijabla y zbog koncepta opseg lanca.

Roditelj vanjske funkcije je globalni, a roditelj unutarnji() funkcija je vanjski() funkcija. Dakle, unutarnji() funkcija ima pristup varijablama svojih roditelja. Ako pokušate pristupiti varijabli a u globalnom opsegu, prikazat će se pogreška. Stoga se može reći da je unutarnji() funkcija je leksički unutar vanjski() funkcija i leksički roditelj vanjski() funkcija je globalna.

Objašnjeni primjeri zatvaranja JavaScripta

Budući da ste naučili o leksičkom okruženju, lako možete pogoditi izlaz sljedećeg koda:

funkcija a(){
 neka je x = 10;
 funkcija b(){
 console.log (x);
 }
 b();
}
a();

Izlaz je 10. Iako to možda nećete pogoditi na prvi pogled, ovo je primjer zatvaranja u JavaScriptu. Zatvaranja nisu ništa drugo nego funkcija i njihovo leksičko okruženje.

Razmotrimo primjer gdje su tri funkcije ugniježđene jedna u drugu:

funkcija a(){ 
 neka je x = 10;
 funkcija b(){ 
 funkcija c(){
 funkcija d(){
 console.log (x);
 }
 d();
 }
 c();
 }
 b();
}
a();

Hoće li se to i dalje zvati zatvaranjem? Odgovor je: da. Opet, zatvaranje je funkcija sa svojim leksičkim roditeljem. Leksički roditelj funkcije d() je c(), a zbog koncepta lanca opsega, funkcija d() ima pristup svim varijablama vanjskih i globalnih funkcija.

Pogledajte još jedan zanimljiv primjer:

funkcija x(){
 neka je a = 9;
 povratna funkcija y(){
 console.log (a); 
 }
}
neka je b = x();

Možete vratiti funkciju unutar funkcije, dodijeliti funkciju varijabli i proslijediti funkciju unutar a funkcija u JavaScriptu. To je ljepota jezika. Možete li pogoditi kakav će biti rezultat ako ispišete varijablu b? Ispisat će funkciju y(). Funkcija x() vraća funkciju y(). Dakle, varijabla b pohranjuje funkciju. Sada, možete li pogoditi što će se dogoditi ako pozovete varijablu b? Ispisuje vrijednost varijable a: 9.

Također možete postići skrivanje podataka pomoću zatvaranja. Za bolje razumijevanje, razmotrite primjer s gumbom koji ima ID pod nazivom "gumb" u pregledniku. Priložimo mu slušatelj događaja klika.

Sada morate izračunati koliko puta je gumb kliknut. Postoje dva načina za to.

1. Napravite globalnu varijablu count i povećajte je na klik. Ali ova metoda ima nedostatak. Lako je napraviti izmjene u globalnim varijablama jer su im lako dostupne.

   Klikni me
   
   

2. Sakrivanje podataka možemo postići korištenjem zatvaranja. Možete zamotati cijelu addEventListener() funkcija unutar funkcije. To čini zatvaranje. I nakon kreiranja zatvaranja, možete stvoriti a count varijabla i povećati njegovu vrijednost na klik. Korištenjem ove metode varijabla će ostati u funkcionalni opseg, i ne mogu se napraviti nikakve izmjene.

   Klikni me
   
   

Povezano: Skriveni heroj web stranica: razumijevanje DOM-a

Zašto su zatvaranja važna?

Zatvaranja su vrlo važna ne samo kada je u pitanju JavaScript, već i u drugim programskim jezicima. Korisni su u mnogim scenarijima u kojima možete stvoriti varijable u njihovom privatnom opsegu ili kombinirati funkcije, između ostalih slučajeva.

Razmotrimo ovaj primjer sastava funkcije:

const množi = (a, b) => a*b;
const pomnožitiBy2 = x => pomnožiti (10, x);
console.log (množitiBy2(9));

Isti primjer možemo implementirati pomoću zatvaranja:

const množi = funkcija (a){
 povratna funkcija (b){
 vrati a*b
 }
}
const pomnožitiBy2 = pomnožiti (2);
console.log (množitiBy2(10))

Funkcije mogu koristiti zatvaranja u sljedećim scenarijima:

1. Za implementaciju funkcije currying
2. Koristi se za skrivanje podataka
3. Za korištenje sa slušateljima događaja
4. Koristi se u metodi setTimeout()

Ne biste trebali nepotrebno koristiti zatvarače

Preporuča se izbjegavati zatvaranja osim ako to nije stvarno potrebno jer ona mogu umanjiti izvedbu vaše aplikacije. Korištenje zatvarača koštat će puno memorije, a ako se zatvaračima ne rukuje pravilno, može dovesti do curenja memorije.

Zatvorene varijable neće biti oslobođene JavaScript-ovim sakupljačem smeća. Kada koristite varijable unutar zatvarača, sakupljač smeća ne oslobađa memoriju jer preglednik smatra da su varijable još uvijek u upotrebi. Stoga te varijable troše memoriju i smanjuju performanse aplikacije.

Evo primjera koji pokazuje kako se varijable unutar zatvaranja neće skupljati u smeće.

 funkcija f(){
 konst x = 3;
 povratna funkcija inner(){
 console.log (x);
 }
 }
 f()();

The varijabla x ovdje troši memoriju iako se ne koristi često. Sakupljač smeća neće moći osloboditi ovu memoriju jer je unutar zatvarača.

JavaScript je beskrajan

Ovladavanje JavaScriptom beskrajan je zadatak, budući da postoji toliko mnogo koncepata i okvira koje sami iskusni programeri obično ne istražuju. Možete značajno poboljšati svoje rukovanje JavaScriptom tako što ćete naučiti osnove i često ih prakticirati. Iteratori i generatori su neki od koncepata koje intervjui pitaju tijekom JavaScript intervjua.

Uvod u iteratore i generatore u JavaScriptu

Naučite metode iteratora i generatora u JS-u.

Pročitajte dalje

O autoru