Kaj so zaprtja JavaScript in kako jih pišete?

JavaScript je eden najzahtevnejših programskih jezikov za obvladovanje. Včasih celo starejši razvijalci ne morejo predvideti izida kode, ki so jo napisali. Eden bolj zmedenih konceptov v JavaScriptu so zaprtja. Začetniki se običajno spotaknejo s konceptom – ne skrbite. Ta članek vas bo počasi vodil skozi osnovne primere, ki vam bodo pomagali bolje razumeti zaprtja. Začnimo.

Kaj so zaprtja?

Zapiranje je struktura funkcije in njenega leksikalnega okolja, vključno z vsemi spremenljivkami v obsegu funkcije ob ustvarjanju zaprtja. Preprosteje povedano, upoštevajte zunanjo funkcijo in notranjo funkcijo. Notranja funkcija bo imela dostop do obsega zunanje funkcije.

Preden si ogledate nekaj primerov zapiranja JavaScript, boste morali razumeti leksikalni obseg.

Kaj je leksično okolje?

Leksikalno okolje je lokalni spomin skupaj z njegovim nadrejenim okoljem. Oglejte si spodnji primer in uganite izhod naslednje kode:

funkcija zunanja (){ 
 naj je a = 10;
 console.log (y);
 notranji ();
 funkcija inner(){
 console.log (a);
 console.log (y);
 }
}
naj bo y = 9;
zunanji ();

Izhod bo 9, 10, 9. Notranja funkcija ima dostop do spremenljivk svojega nadrejenega, the zunanji () funkcijo. Zato, notranji () funkcija lahko dostopa spremenljivka a. The notranji () funkcija ima tudi dostop spremenljivka y zaradi koncepta obseg verige.

Nadrejeni element zunanje funkcije je globalen, nadrejeni element pa notranji () funkcija je zunanji () funkcijo. Zato, notranji () funkcija ima dostop do spremenljivk svojih staršev. Če poskušate dostopati do spremenljivke a v globalnem obsegu bo prikazal napako. Zato lahko rečete, da notranji () funkcija je leksično znotraj zunanji () funkcijo in leksikalni nadrejeni element zunanji () funkcija je globalna.

Razloženi primeri zapiranja JavaScript

Ker ste se naučili leksikalnega okolja, lahko zlahka uganete izhod naslednje kode:

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

Izhod je 10. Čeprav morda ne uganete na prvi pogled, je to primer zaprtja v JavaScriptu. Zapiranja niso nič drugega kot funkcija in njihovo leksikalno okolje.

Oglejmo si primer, kjer so tri funkcije ugnezdene ena v drugo:

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

Se bo to še vedno imenovalo zaprtje? Odgovor je: da. Ponovno je zaprtje funkcija s svojim leksikalnim staršem. Leksikalni nadrejeni element funkcije d() je c(), in zaradi koncepta verige obsega, funkcija d() ima dostop do vseh spremenljivk zunanjih in globalnih funkcij.

Poglejte si še en zanimiv primer:

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

Funkcijo lahko vrnete znotraj funkcije, dodelite funkcijo spremenljivki in podate funkcijo znotraj a funkcijo v JavaScriptu. To je lepota jezika. Ali lahko uganete, kakšen bo rezultat, če natisnete spremenljivko b? Natisnil bo funkcijo y(). Funkcija x() vrne funkcijo y(). Zato spremenljivka b shrani funkcijo. Zdaj, ali lahko uganete, kaj se bo zgodilo, če pokličete spremenljivko b? Natisne vrednost spremenljivke a: 9.

Skrivanje podatkov lahko dosežete tudi z zapiranjem. Za boljše razumevanje si oglejte primer z gumbom, ki ima v brskalniku ID z imenom "gumb". Priložimo mu poslušalec dogodka klikov.

Zdaj morate izračunati, kolikokrat je gumb kliknjen. Obstajata dva načina za to.

1. Ustvarite globalno spremenljivko count in jo povečajte s klikom. Toda ta metoda ima pomanjkljivost. Globalne spremenljivke je enostavno spreminjati, ker so zlahka dostopne.

   Kliknite me
   
   

2. Skrivanje podatkov lahko dosežemo z zapiranjem. Celotno lahko zavijete addEventListener() funkcija znotraj funkcije. To naredi zaprtje. Ko ustvarite zaprtje, lahko ustvarite a spremenljivka štetja in povečaj njegovo vrednost ob kliku. Z uporabo te metode bo spremenljivka ostala v funkcionalni obseg, in ni mogoče spremeniti.

   Kliknite me
   
   

Povezano: Skriti junak spletnih mest: razumevanje DOM-a

Zakaj so zaprtja pomembna?

Zapiranja so zelo pomembna ne le, ko gre za JavaScript, ampak tudi v drugih programskih jezikih. Uporabne so v številnih scenarijih, kjer lahko med drugim ustvarite spremenljivke v njihovem zasebnem obsegu ali kombinirate funkcije.

Razmislite o tem primeru sestave funkcij:

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

Isti primer lahko implementiramo z zapiranjem:

const pomnoži = funkcija (a){
 povratna funkcija (b){
 vrni a*b
 }
}
const pomnoži z2 = pomnoži (2);
console.log (pomnoži z2(10))

Funkcije lahko uporabljajo zaprtja v naslednjih scenarijih:

1. Za izvajanje funkcije currying
2. Uporablja se za skrivanje podatkov
3. Za uporabo s poslušalci dogodkov
4. Za uporabo v metodi setTimeout()

Zapiral ne bi smeli uporabljati po nepotrebnem

Priporočljivo je, da se izogibate zaprtju, razen če je resnično potrebno, ker lahko zmanjšajo učinkovitost vaše aplikacije. Uporaba zapirala bo stala veliko pomnilnika, in če z zapirali ne ravnamo pravilno, lahko to povzroči puščanje spomina.

Zaprtih spremenljivk JavaScriptov zbiralnik smeti ne bo sprostil. Ko uporabljate spremenljivke znotraj zapiral, zbiralnik smeti ne sprosti pomnilnika, ker brskalnik meni, da so spremenljivke še vedno v uporabi. Zato te spremenljivke porabijo pomnilnik in zmanjšajo zmogljivost aplikacije.

Tukaj je primer, ki kaže, kako spremenljivke znotraj zapiranja ne bodo zbrane smeti.

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

The spremenljivka x tukaj porabi pomnilnik, čeprav se ne uporablja pogosto. Zbiralnik smeti ne bo mogel sprostiti tega pomnilnika, ker je znotraj zapirala.

JavaScript je neskončen

Obvladovanje JavaScripta je neskončna naloga, saj obstaja toliko konceptov in okvirjev, ki jih izkušeni razvijalci običajno ne raziskujejo sami. Svoje obvladovanje JavaScripta lahko znatno izboljšate tako, da se naučite osnov in jih pogosto vadite. Iteratorji in generatorji so nekateri koncepti, ki jih intervjuji sprašujejo med intervjuji za JavaScript.

Uvod v iteratorje in generatorje v JavaScriptu

Naučite se metod iteratorja in generatorja v JS.

Preberite Naprej

O avtorju