Kas yra „JavaScript“ uždarymai ir kaip juos rašyti?

JavaScript yra viena iš sudėtingiausių programavimo kalbų. Kartais net vyresni kūrėjai negali nuspėti parašyto kodo išvesties. Viena iš painiausių „JavaScript“ sąvokų yra uždarymas. Pradedantiesiems paprastai užkliūna ši idėja – nesijaudinkite. Šiame straipsnyje lėtai bus pateikti pagrindiniai pavyzdžiai, kurie padės geriau suprasti uždarymą. Pradėkime.

Kas yra uždarymai?

Uždarymas yra funkcijos struktūra ir jos leksinė aplinka, įskaitant visus funkcijos apimties kintamuosius uždarymo metu. Paprasčiau tariant, apsvarstykite išorinę ir vidinę funkciją. Vidinė funkcija turės prieigą prie išorinės funkcijos.

Prieš žiūrėdami į kai kuriuos „JavaScript“ uždarymo pavyzdžius, turėsite suprasti leksinę apimtį.

Kas yra leksinė aplinka?

Leksinė aplinka yra vietinė atmintis kartu su pirmine aplinka. Peržiūrėkite toliau pateiktą pavyzdį ir atspėkite šio kodo išvestį:

function outer(){ 
 tegul a = 10;
 console.log (y);
 vidinis ();
 function inner(){
 console.log (a);
 console.log (y);
 }
}
tegul y = 9;
išorinis();

Išeiga bus 9, 10, 9. Vidinė funkcija turi prieigą prie savo pirminės funkcijos kintamųjų išorinis() funkcija. Vadinasi, vidinis () funkcija gali pasiekti kintamasis a. The vidinis () funkcija taip pat gali pasiekti kintamasis y dėl sąvokos apimties grandinė.

Išorinės funkcijos pirminė reikšmė yra visuotinė, o pagrindinė - vidinis () funkcija yra išorinis() funkcija. Vadinasi, vidinis () funkcija turi prieigą prie savo tėvų kintamųjų. Jei bandysite pasiekti kintamąjį a pasaulinėje srityje bus rodoma klaida. Vadinasi, galima sakyti, kad vidinis () funkcija leksiškai yra viduje išorinis() funkcija ir leksinis pirminis išorinis() funkcija yra globali.

„JavaScript“ uždarymo pavyzdžiai paaiškinti

Kadangi sužinojote apie leksinę aplinką, galite lengvai atspėti šio kodo išvestį:

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

Išvestis yra 10. Nors iš pirmo žvilgsnio to negalite atspėti, tai yra „JavaScript“ uždarymo pavyzdys. Uždarymai yra ne kas kita, kaip funkcija ir jų leksinė aplinka.

Panagrinėkime pavyzdį, kai yra trys funkcijos, įdėtos viena į kitą:

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

Ar tai vis tiek vadinsis uždarymu? Atsakymas yra: taip. Vėlgi, uždarymas yra funkcija su savo leksiniu pirminiu. Leksinis funkcijos tėvas d() yra c(), o dėl apimties grandinės sampratos, funkcijos d() turi prieigą prie visų išorinių ir pasaulinių funkcijų kintamųjų.

Pažvelkite į kitą įdomų pavyzdį:

funkcija x(){
 tegul a = 9;
 grąžinimo funkcija y(){
 console.log (a); 
 }
}
tegul b = x();

Galite grąžinti funkciją funkcijos viduje, priskirti funkciją kintamajam ir perduoti funkciją a viduje funkcija JavaScript. Tai yra kalbos grožis. Ar galite atspėti, kokia bus išvestis, jei spausdinsite kintamąjį b? Tai atliks spausdinimo funkciją y(). Funkcija x() grąžina funkciją y(). Vadinasi, kintamasis b išsaugo funkciją. Dabar galite atspėti, kas nutiks, jei iškviesite kintamąjį b? Jis atspausdina kintamojo reikšmę a: 9.

Taip pat galite paslėpti duomenis naudodami uždarymus. Norėdami geriau suprasti, apsvarstykite pavyzdį su mygtuku, kurio ID naršyklėje yra „mygtukas“. Prie jo pridėkime paspaudimo įvykių klausytoją.

Dabar reikia apskaičiuoti mygtuko paspaudimų skaičių. Yra du būdai tai padaryti.

1. Sukurkite visuotinį kintamųjų skaičių ir padidinkite jį spustelėjus. Tačiau šis metodas turi trūkumų. Lengva keisti visuotinius kintamuosius, nes jie lengvai pasiekiami.

   Paspausk mane
   
   

2. Duomenų slėpimą galime pasiekti naudodami uždarymus. Galite apvynioti visą addEventListener() funkcija funkcijos viduje. Tai daro uždarymą. O sukūrę uždarymą galite sukurti a skaičiavimo kintamasis ir padidinkite jo vertę onclick. Naudojant šį metodą, kintamasis liks funkcinė apimtis, ir negalima atlikti jokių pakeitimų.

   Paspausk mane
   
   

Susijęs: Paslėptas svetainių herojus: DOM supratimas

Kodėl uždarymai yra svarbūs?

Uždarymai labai svarbūs ne tik kalbant apie JavaScript, bet ir kitose programavimo kalbose. Jie naudingi daugelyje scenarijų, kai, be kitų atvejų, galite sukurti kintamuosius privačioje srityje arba derinti funkcijas.

Apsvarstykite šį funkcijų sudėties pavyzdį:

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

Tą patį pavyzdį galime įgyvendinti naudodami uždarymus:

const dauginti = funkcija (a){
 grąžinimo funkcija (b){
 grąžinti a*b
 }
}
const multiplyBy2 = dauginti (2);
console.log (multiplyBy2(10))

Funkcijos gali naudoti uždarymus šiais atvejais:

1. Įgyvendinti funkciją curry
2. Naudojamas duomenų slėpimui
3. Naudoti su įvykių klausytojais
4. Naudojamas setTimeout metodu()

Neturėtumėte naudoti užtrauktukų be reikalo

Rekomenduojama vengti uždarymo, nebent to tikrai reikia, nes tai gali sumažinti programos našumą. Uždarymo naudojimas kainuos daug atminties, o jei uždarymai nebus tinkamai tvarkomi, tai gali sukelti problemų atminties nutekėjimai.

„JavaScript“ šiukšlių rinkėjas neatlaisvins uždarytų kintamųjų. Kai uždarymo viduje naudojate kintamuosius, šiukšlių rinkėjas neatlaisvina atminties, nes naršyklė mano, kad kintamieji vis dar naudojami. Taigi šie kintamieji eikvoja atmintį ir sumažina programos našumą.

Štai pavyzdys, rodantis, kaip uždarymo viduje esantys kintamieji nebus renkami.

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

The kintamasis x čia sunaudojama atmintis, nors ji ir nenaudojama dažnai. Šiukšlių surinkėjas negalės atlaisvinti šios atminties, nes ji yra uždarymo viduje.

JavaScript yra begalinis

„JavaScript“ įvaldymas yra begalinė užduotis, nes yra tiek daug koncepcijų ir sistemų, kurių paprastai patys patyrę kūrėjai nenagrinėja. Galite žymiai pagerinti savo „JavaScript“ valdymą, mokydamiesi pagrindų ir dažnai juos praktikuodami. Iteratoriai ir generatoriai yra keletas sąvokų, kurių interviu klausia „JavaScript“ interviu metu.

„JavaScript“ iteratorių ir generatorių įvadas

Susipažinkite su iteratoriaus ir generatoriaus metodais JS.

Skaitykite toliau

Apie autorių