Mik azok a JavaScript-lezárások, és hogyan írjuk őket?

A JavaScript az egyik legnehezebben elsajátítható programozási nyelv. Néha még a vezető fejlesztők sem tudják megjósolni az általuk írt kód kimenetét. A JavaScript egyik zavaróbb fogalma a lezárások. A kezdők általában belebotlanak a koncepcióba – ne aggódj. Ez a cikk lassan végigvezeti az alapvető példákon, hogy jobban megértse a lezárásokat. Lássunk neki.

Mik azok a lezárások?

A lezárás egy függvény szerkezete és lexikális környezete, beleértve a függvény hatókörébe tartozó változókat a lezárás létrehozásakor. Egyszerűbben fogalmazva, vegyünk egy külső függvényt és egy belső függvényt. A belső funkció hozzáfér a külső funkció hatóköréhez.

Mielőtt megnézne néhány JavaScript-lezárási példát, meg kell értenie a lexikális hatókört.

Mi az a lexikális környezet?

A lexikális környezet a helyi memória a szülő környezetével együtt. Nézze meg az alábbi példát, és találja ki a következő kód kimenetét:

function outer(){ 
 legyen a = 10;
 console.log (y);
 belső();
 function inner(){
 console.log (a);
 console.log (y);
 }
}
legyen y = 9;
külső();

A kimenet az lesz 9, 10, 9. A belső függvény hozzáfér a szülő változóihoz, a külső() funkció. Ezért a belső() funkció elérheti változó a. A belső() funkció is elérheti y változó fogalma miatt a hatókör lánc.

A külső függvény szülője globális, a szülője pedig a belső() funkció a külső() funkció. Ezért a belső() függvény hozzáfér a szülei változóihoz. Ha megpróbál hozzáférni a változóhoz a a globális hatókörben hibaüzenetet jelenít meg. Ezért mondhatjuk, hogy a belső() függvény lexikailag a külső() függvény, és a lexikális szülője külső() a funkció globális.

JavaScript bezárási példák magyarázata

Mivel megismerte a lexikális környezetet, könnyen kitalálhatja a következő kód kimenetét:

függvény a(){
 legyen x = 10;
 függvény b(){
 console.log (x);
 }
 b();
}
a();

A kimenet az 10. Bár első pillantásra nem sejti, ez egy példa a JavaScript-bezárásra. A lezárások nem mások, mint egy funkció és lexikális környezetük.

Vegyünk egy példát, ahol három függvény van egymásba ágyazva:

függvény a(){ 
 legyen x = 10;
 függvény b(){ 
 függvény c(){
 függvény d(){
 console.log (x);
 }
 d();
 }
 c();
 }
 b();
}
a();

Akkor is bezárásnak hívják? A válasz igen. A lezárás ismét egy függvény a lexikális szülőjével. A függvény lexikális szülője d() van c(), és a hatókör lánc, funkció fogalmából adódóan d() hozzáfér a külső függvények és a globális függvények összes változójához.

Vessen egy pillantást egy másik érdekes példára:

függvény x(){
 legyen a = 9;
 return függvény y(){
 console.log (a); 
 }
}
legyen b = x();

Visszaadhat egy függvényt egy függvényen belül, függvényt rendelhet egy változóhoz, és átadhat egy függvényt az a-n belül függvény JavaScriptben. Ez a nyelv szépsége. Ki tudja tippelni, mi lesz a kimenet, ha változót nyomtat? b? Nyomtatási funkciója lesz y(). A funkció x() függvényt ad vissza y(). Ezért a változó b függvényt tárol. Most már sejtheti, mi fog történni, ha meghívja a változót b? Kiírja a változó értékét a: 9.

Lezárásokkal is elérheti az adatok elrejtését. A jobb megértés érdekében vegyen egy példát egy gombbal, amelynek a böngészőben a "button" nevű azonosítója van. Csatoljunk hozzá egy kattintásos eseményfigyelőt.

Most ki kell számítania, hányszor kattintanak a gombra. Ennek két módja van.

1. Hozzon létre egy globális változószámot, és növelje azt onclick. De ennek a módszernek van egy hibája. Könnyen módosítható a globális változókban, mert könnyen hozzáférhetők.

   Kattints ide
   
   

2. Lezárások használatával érhetjük el az adatok elrejtését. Becsomagolhatod az egészet addEventListener() funkció egy függvényen belül. Lezárást tesz. A lezárás létrehozása után pedig létrehozhat a számláló változó és növelje az értékét onclick. Ezzel a módszerrel a változó a funkcionális hatókör, és nem lehet módosítani.

   Kattints ide
   
   

Összefüggő: A webhelyek rejtett hőse: A DOM megértése

Miért fontosak a bezárások?

A lezárások nem csak a JavaScript esetében nagyon fontosak, hanem más programozási nyelveknél is. Hasznosak sok olyan forgatókönyvben, ahol változókat hozhat létre saját hatókörükben, vagy kombinálhat függvényeket, többek között.

Tekintsük ezt a függvényösszetételi példát:

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

Ugyanezt a példát megvalósíthatjuk lezárások segítségével:

const szorzás = függvény (a){
 return függvény (b){
 vissza a*b
 }
}
const multiplyBy2 = szorzás (2);
console.log (multiplyBy2(10))

A funkciók a következő forgatókönyvekben használhatnak lezárásokat:

1. Funkció currying megvalósításához
2. Adatok elrejtésére használható
3. Eseményfigyelőkkel használható
4. A setTimeout metódusban() használandó

Ne használjon szükségtelenül zárakat

Javasoljuk, hogy kerülje a bezárásokat, kivéve, ha valóban szükséges, mert csökkentheti az alkalmazás teljesítményét. A lezárás használata sok memóriába kerül, és ha a záróelemeket nem kezelik megfelelően, ez azokhoz vezethet memóriaszivárgás.

A bezárt változókat a JavaScript szemétgyűjtője nem szabadítja fel. Ha változókat használ a lezárásokon belül, a memóriát a szemétgyűjtő nem szabadítja fel, mert a böngésző úgy érzi, hogy a változók még használatban vannak. Ezért ezek a változók memóriát fogyasztanak, és csökkentik az alkalmazás teljesítményét.

Íme egy példa, amely bemutatja, hogy a bezárásokon belüli változók hogyan nem kerülnek összegyűjtésre.

 függvény f(){
 const x = 3;
 return függvény inner(){
 console.log (x);
 }
 }
 f()();

A x változó itt is memóriát fogyaszt, bár nem gyakran használják. A szemétgyűjtő nem tudja felszabadítani ezt a memóriát, mert az a fedél belsejében van.

A JavaScript végtelen

A JavaScript elsajátítása végtelen feladat, mivel rengeteg olyan koncepció és keretrendszer létezik, amelyeket általában nem fedeznek fel maguk a tapasztalt fejlesztők. Az alapok elsajátításával és gyakori gyakorlásával jelentősen javíthatja a JavaScript kezelését. Az iterátorok és generátorok olyan fogalmak, amelyeket az interjúk során feltesznek a JavaScript-interjúk során.

Bevezetés a JavaScript iterátoraiba és generátoraiba

Ismerje meg a JS iterátor és generátor módszereit.

Olvassa el a következőt

A szerzőről