Mitä ovat JavaScript-sulkemiset ja miten kirjoitat ne?

JavaScript on yksi vaikeimmista ohjelmointikielistä. Joskus jopa vanhemmat kehittäjät eivät pysty ennustamaan kirjoittamansa koodin tulosta. Yksi hämmentävämmistä JavaScriptin käsitteistä on sulkemiset. Aloittelijat yleensä kompastuvat konseptiin – älä huoli. Tämä artikkeli opastaa sinut hitaasti läpi perusesimerkit, jotka auttavat sinua ymmärtämään sulkemisia paremmin. Aloitetaan.

Mitä sulkemiset ovat?

Sulkeminen on funktion ja sen leksikaalisen ympäristön rakenne, joka sisältää kaikki funktion laajuuden muuttujat sulkemisen luomisen yhteydessä. Yksinkertaisemmin sanottuna harkitse ulkoista funktiota ja sisäistä toimintoa. Sisätoiminnolla on pääsy ulkoisen toiminnon soveltamisalaan.

Ennen kuin tarkastelet joitain JavaScript-sulkuesimerkkejä, sinun on ymmärrettävä leksikaalinen laajuus.

Mikä on leksinen ympäristö?

Leksikaalinen ympäristö on paikallinen muisti yhdessä sen emoympäristön kanssa. Katso alla oleva esimerkki ja arvaa seuraavan koodin tulos:

function outer(){ 
 olkoon a = 10;
 console.log (y);





instagram viewer


 sisäinen();
 function inner(){
 console.log (a);
 console.log (y);
 }
}
olkoon y = 9;
ulkoinen();

Tulos tulee olemaan 9, 10, 9. Sisäfunktiolla on pääsy emofunktionsa muuttujiin ulkoinen () toiminto. Siksi, sisäinen() toiminto voi käyttää muuttuja a. The sisäinen() toimintoa voi myös käyttää muuttuja y käsitteen takia ulottuvuusketju.

Ulkoisen funktion emo on globaali ja funktion emo sisäinen() toiminto on ulkoinen () toiminto. Siksi, sisäinen() funktiolla on pääsy vanhempiensa muuttujiin. Jos yrität päästä muuttujaan a globaalissa laajuudessa, se näyttää virheilmoituksen. Siksi voidaan sanoa, että sisäinen() funktio on leksisesti sisällä ulkoinen () funktio ja leksikaalinen vanhempi ulkoinen () toiminto on globaali.

Esimerkkejä JavaScriptin sulkemisesta

Koska olet oppinut leksikaalisesta ympäristöstä, voit helposti arvata seuraavan koodin tulosteen:

funktio a(){
 olkoon x = 10;
 funktio b(){
 console.log (x);
 }
 b();
}
a();

Lähtö on 10. Vaikka et ehkä arvaakaan sitä ensi silmäyksellä, tämä on esimerkki JavaScriptin sulkemisesta. Sulkemiset eivät ole muuta kuin funktio ja niiden leksikaalinen ympäristö.

Tarkastellaan esimerkkiä, jossa on kolme funktiota sisäkkäin sisäkkäin:

funktio a(){ 
 olkoon x = 10;
 funktio b(){ 
 funktio c(){
 funktio d(){
 console.log (x);
 }
 d();
 }
 c();
 }
 b();
}
a();

Kutsutaanko sitä edelleen sulkemiseksi? Vastaus on kyllä. Jälleen sulkeminen on funktio sen leksikaalisen emon kanssa. Toiminnan leksikaalinen vanhempi d() On c(), ja soveltamisalan ketjun käsitteestä johtuen toiminto d() sillä on pääsy kaikkiin ulompien ja globaalien funktioiden muuttujiin.

Katso toinen mielenkiintoinen esimerkki:

funktio x(){
 olkoon a = 9;
 paluufunktio y(){
 console.log (a); 
 }
}
olkoon b = x();

Voit palauttaa funktion funktion sisällä, määrittää funktion muuttujalle ja välittää funktion a: n sisällä toiminto JavaScriptissä. Tämä on kielen kauneus. Voitko arvata, mikä tulos on, jos tulostat muuttujan b? Se tulostaa toiminnon y(). Toiminto x() palauttaa funktion y(). Siksi muuttuja b tallentaa funktion. Nyt voit arvata, mitä tapahtuu, jos kutsut muuttujaa b? Se tulostaa muuttujan arvon a: 9.

Voit myös piilottaa tiedot käyttämällä sulkemisia. Ymmärtääksesi paremmin, harkitse esimerkkiä painikkeesta, jonka tunnus on "button" selaimessa. Liitä siihen klikkaustapahtuman kuuntelija.

Nyt sinun on laskettava, kuinka monta kertaa painiketta napsautetaan. On kaksi tapaa tehdä se.

1. Luo globaali muuttujamäärä ja lisää sitä napsauttamalla. Mutta tällä menetelmällä on puute. On helppo tehdä muutoksia globaaleihin muuttujiin, koska ne ovat helposti saatavilla.

   Napsauta minua
   
   

2. Voimme saavuttaa tietojen piilottamisen käyttämällä sulkuja. Voit kääriä koko addEventListener() funktio funktion sisällä. Se tekee sulkemisen. Ja kun olet luonut sulkemisen, voit luoda a count muuttuja ja kasvattaa sen arvoa onclick. Tätä menetelmää käytettäessä muuttuja pysyy toiminnallinen laajuus, eikä siihen voi tehdä muutoksia.

   Napsauta minua
   
   

Aiheeseen liittyvä: Verkkosivustojen piilotettu sankari: DOM: n ymmärtäminen

Miksi sulkemiset ovat tärkeitä?

Sulkemiset ovat erittäin tärkeitä JavaScriptin lisäksi myös muissa ohjelmointikielissä. Ne ovat hyödyllisiä monissa skenaarioissa, joissa voit muun muassa luoda muuttujia niiden yksityisessä laajuudessa tai yhdistää toimintoja.

Harkitse tätä esimerkkiä funktion koostumuksesta:

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

Voimme toteuttaa saman esimerkin käyttämällä sulkuja:

const kerro = funktio (a){
 paluufunktio (b){
 palauta a*b
 }
}
const multiplyBy2 = kerro (2);
console.log (multiplyBy2(10))

Funktiot voivat käyttää sulkemisia seuraavissa tilanteissa:

1. Toteuttaa funktio currying
2. Käytetään tietojen piilottamiseen
3. Käytetään tapahtumaseurainten kanssa
4. Käytetään setTimeout-metodissa()

Älä käytä sulkimia tarpeettomasti

On suositeltavaa välttää sulkemisia, ellei niitä todella tarvita, koska ne voivat heikentää sovelluksesi suorituskykyä. Sulkimen käyttö maksaa paljon muistia, ja jos sulkimia ei käsitellä oikein, se voi johtaa muistivuotoja.

JavaScriptin roskienkerääjä ei vapauta suljettuja muuttujia. Kun käytät muuttujia sulkujen sisällä, roskankerääjä ei vapauta muistia, koska selaimen mielestä muuttujat ovat edelleen käytössä. Siksi nämä muuttujat kuluttavat muistia ja heikentävät sovelluksen suorituskykyä.

Tässä on esimerkki, joka osoittaa, kuinka sulkujen sisällä olevia muuttujia ei kerätä roskaa.

 funktio f(){
 const x = 3;
 paluufunktio inner(){
 console.log (x);
 }
 }
 f()();

The muuttuja x tämä kuluttaa muistia, vaikka sitä ei käytetä usein. Roskankerääjä ei pysty vapauttamaan tätä muistia, koska se on sulkimen sisällä.

JavaScript on loputon

JavaScriptin hallitseminen on loputon tehtävä, koska on olemassa niin monia käsitteitä ja puitteita, joita kokeneet kehittäjät eivät yleensä tutki itse. Voit parantaa JavaScript-hallintaasi merkittävästi oppimalla perusasiat ja harjoittelemalla niitä säännöllisesti. Iteraattorit ja generaattorit ovat joitain käsitteitä, joita haastatteluissa kysytään JavaScript-haastatteluissa.

Johdatus iteraattoreihin ja generaattoreihin JavaScriptissä

Tutustu iteraattori- ja generaattorimenetelmiin JS: ssä.

Lue Seuraava

Kirjailijasta