Mis on JavaScripti sulgemised ja kuidas neid kirjutada?

JavaScript on üks keerulisemaid programmeerimiskeeli, mida valdada. Mõnikord ei suuda isegi vanemad arendajad ennustada nende kirjutatud koodi väljundit. Üks JavaScripti segasemaid mõisteid on sulgemine. Algajad komistavad tavaliselt selle kontseptsiooni peale – ärge muretsege. See artikkel juhendab teid aeglaselt läbi põhinäidete, mis aitavad teil sulgemist paremini mõista. Alustame.

Mis on sulgemised?

Sulgemine on funktsiooni struktuur ja selle leksikaalne keskkond, sealhulgas kõik funktsiooni ulatuses olevad muutujad sulgemise loomisel. Lihtsamalt öeldes kaaluge välist ja sisemist funktsiooni. Sisemisel funktsioonil on juurdepääs välise funktsiooni ulatusele.

Enne mõne JavaScripti sulgemise näite vaatamist peate mõistma leksikaalset ulatust.

Mis on leksikaalne keskkond?

Leksikaalne keskkond on kohalik mälu koos selle algkeskkonnaga. Vaadake allolevat näidet ja arvake ära järgmise koodi väljund:

function outer(){ 
 olgu a = 10;
 console.log (y);
 sisemine();
 function inner(){
 console.log (a);
 console.log (y);
 }
}
olgu y = 9;
välimine();

Väljund saab olema 9, 10, 9. Sisefunktsioonil on juurdepääs oma põhifunktsiooni muutujatele välimine () funktsiooni. Seega, sisemine () funktsioon pääseb juurde muutuja a. The sisemine () pääseb juurde ka funktsioonile muutuja y kontseptsiooni tõttu ulatuse ahel.

Välise funktsiooni vanem on globaalne ja funktsiooni vanem sisemine () funktsioon on välimine () funktsiooni. Seega, sisemine () funktsioonil on juurdepääs oma vanemate muutujatele. Kui proovite muutujale juurde pääseda a globaalses ulatuses, kuvab see veateate. Seega võib öelda, et sisemine () funktsioon on leksikaalselt sees välimine () funktsioon ja leksikaalne vanem välimine () funktsioon on globaalne.

Selgitatud JavaScripti sulgemise näited

Kuna olete õppinud tundma leksikaalset keskkonda, võite hõlpsasti arvata järgmise koodi väljundi:

funktsioon a(){
 olgu x = 10;
 funktsioon b(){
 console.log (x);
 }
 b();
}
a();

Väljund on 10. Kuigi te ei pruugi seda esmapilgul arvata, on see näide JavaScripti sulgemisest. Sulgemised pole midagi muud kui funktsioon ja nende leksikaalne keskkond.

Vaatleme näidet, kus üksteise sees on pesastatud kolm funktsiooni:

funktsioon a(){ 
 olgu x = 10;
 funktsioon b(){ 
 funktsioon c(){
 funktsioon d(){
 console.log (x);
 }
 d();
 }
 c();
 }
 b();
}
a();

Kas seda nimetatakse ikkagi sulgemiseks? Vastus on: jah. Jällegi on sulgemine funktsioon oma leksikaalse vanemaga. Funktsiooni leksikaalne vanem d() on c(), ja ulatuse ahela mõistest tulenevalt funktsioon d() tal on juurdepääs kõikidele välisfunktsioonide ja globaalsete funktsioonide muutujatele.

Heitke pilk veel ühele huvitavale näitele:

funktsioon x(){
 olgu a = 9;
 tagastamisfunktsioon y(){
 console.log (a); 
 }
}
olgu b = x();

Saate tagastada funktsiooni funktsiooni sees, määrata funktsiooni muutujale ja edastada funktsiooni a sees funktsioon JavaScriptis. See on keele ilu. Kas saate arvata, milline on muutuja printimise väljund? b? See hakkab printima y(). Funktsioon x() tagastab funktsiooni y(). Seega muutuja b salvestab funktsiooni. Kas te võite nüüd arvata, mis juhtub, kui kutsute muutujat b? See prindib muutuja väärtuse a: 9.

Andmete peitmise saate saavutada ka sulgemiste abil. Parema mõistmise huvides vaadake näidet nupuga, mille brauseris on ID nimega "nupp". Kinnitame sellele klikisündmuste kuulaja.

Nüüd peate arvutama, mitu korda nuppu klõpsate. Selleks on kaks võimalust.

1. Looge globaalne muutujate arv ja suurendage seda klõpsuga. Kuid sellel meetodil on puudusi. Globaalsetes muutujates on lihtne muudatusi teha, kuna need on kergesti ligipääsetavad.

   Klõpsake mind
   
   

2. Andmete peitmise saame saavutada sulgemiste abil. Saate pakkida kogu addEventListener() funktsioon funktsiooni sees. See teeb sulgemise. Ja pärast sulgemise loomist saate luua a loendusmuutuja ja suurendage selle väärtust onclick. Seda meetodit kasutades jääb muutuja sisse funktsionaalne ulatus, ja muudatusi teha ei saa.

   Klõpsake mind
   
   

Seotud: Veebisaitide varjatud kangelane: DOM-i mõistmine

Miks on sulgemised olulised?

Sulgemised on väga olulised mitte ainult JavaScripti, vaid ka teiste programmeerimiskeelte puhul. Need on kasulikud paljudes stsenaariumides, kus saate muu hulgas luua muutujaid nende privaatses ulatuses või kombineerida funktsioone.

Vaatleme seda funktsiooni koostise näidet:

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

Sama näidet saame rakendada sulgurite abil:

const korrutada = funktsioon (a){
 tagastamisfunktsioon (b){
 tagasta a*b
 }
}
const multiplyBy2 = korruta (2);
console.log (multiplyBy2(10))

Funktsioonid võivad kasutada sulgemist järgmistel juhtudel.

1. Funktsiooni curry rakendamiseks
2. Kasutada andmete peitmiseks
3. Kasutamiseks koos sündmuste kuulajatega
4. Kasutatakse setTimeout meetodis()

Te ei tohiks sulgureid asjatult kasutada

Soovitatav on vältida sulgemisi, välja arvatud juhul, kui see on tõesti vajalik, kuna see võib teie rakenduse jõudlust vähendada. Sulguri kasutamine maksab palju mälu ja kui sulgureid ei käsitseta õigesti, võib see põhjustada mälulekked.

Suletud muutujaid JavaScripti prügikoguja ei vabasta. Kui kasutate muutujaid sulgemiste sees, ei vabasta prügikoguja mälu, kuna brauser tunneb, et muutujad on endiselt kasutusel. Seetõttu tarbivad need muutujad mälu ja vähendavad rakenduse jõudlust.

Siin on näide, mis näitab, kuidas sulgurite sees olevaid muutujaid ei koguta prügi.

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

The muutuja x see kulutab mälu, kuigi seda sageli ei kasutata. Prügikoguja ei saa seda mälu vabastada, kuna see on sulguri sees.

JavaScript on lõputu

JavaScripti valdamine on lõputu ülesanne, kuna on nii palju kontseptsioone ja raamistikke, mida kogenud arendajad ise tavaliselt ei uuri. Põhitõdesid õppides ja neid sageli harjutades saate JavaScripti käepidet oluliselt parandada. Iteraatorid ja generaatorid on mõned mõisted, mida intervjuud JavaScripti intervjuude ajal küsivad.

Sissejuhatus JavaScripti iteraatoritesse ja generaatoritesse

Õppige JS-i iteraatori- ja generaatorimeetodeid tundma.

Loe edasi

Autori kohta