Co jsou uzávěry JavaScriptu a jak je zapisujete?

JavaScript je jedním z nejobtížnějších programovacích jazyků, které lze zvládnout. Někdy ani starší vývojáři nejsou schopni předvídat výstup kódu, který napsali. Jedním z více matoucích konceptů v JavaScriptu jsou uzávěry. Začátečníci obvykle zakopnou o tento koncept – nebojte se. Tento článek vás pomalu provede základními příklady, které vám pomohou lépe porozumět uzávěrkám. Začněme.

Co jsou uzávěry?

Uzávěr je struktura funkce a její lexikální prostředí, včetně všech proměnných v rozsahu funkce při vytvoření uzávěru. Jednodušeji řečeno, zvažte vnější funkci a vnitřní funkci. Vnitřní funkce bude mít přístup k rozsahu vnější funkce.

Než se podíváte na některé příklady uzavření JavaScriptu, musíte porozumět lexikálnímu rozsahu.

Co je to lexikální prostředí?

Lexikální prostředí je lokální paměť spolu s nadřazeným prostředím. Podívejte se na níže uvedený příklad a hádejte výstup následujícího kódu:

function external(){ 
 nechť a = 10;
 console.log (y);
 vnitřní();
 function inner(){
 console.log (a);
 console.log (y);
 }
}
nechť y = 9;
vnější();

Výstup bude 9, 10, 9. Vnitřní funkce má přístup k proměnným svého rodiče, the vnější() funkce. Proto, vnitřní() funkce může přistupovat proměnná a. The vnitřní() funkce může také přistupovat proměnná y kvůli konceptu rozsahový řetězec.

Rodič vnější funkce je globální a rodič funkce vnitřní() funkce je vnější() funkce. Proto, vnitřní() funkce má přístup k proměnným svých rodičů. Pokud se pokusíte získat přístup k proměnné A v globálním rozsahu zobrazí chybu. Dá se tedy říci, že vnitřní() funkce je lexikálně uvnitř vnější() funkce a lexikální rodič vnější() funkce je globální.

Příklady uzavření JavaScriptu vysvětleny

Protože jste se dozvěděli o lexikálním prostředí, můžete snadno uhodnout výstup následujícího kódu:

funkce a(){
 nechť x = 10;
 funkce b(){
 console.log (x);
 }
 b();
}
A();

Výstup je 10. I když to na první pohled možná neuhádnete, jde o příklad uzavření v JavaScriptu. Uzávěry nejsou nic jiného než funkce a jejich lexikální prostředí.

Uvažujme příklad, kde jsou tři funkce vnořené do sebe:

funkce a(){ 
 nechť x = 10;
 funkce b(){ 
 funkce c(){
 funkce d(){
 console.log (x);
 }
 d();
 }
 C();
 }
 b();
}
A();

Bude se tomu ještě říkat uzavírka? Odpověď je ano. Opět platí, že uzávěr je funkce se svým lexikálním rodičem. Lexikální rodič funkce d() je C(), a vzhledem ke konceptu řetězce rozsahu, funkce d() má přístup ke všem proměnným vnějších funkcí a globálních.

Podívejte se na další zajímavý příklad:

funkce x(){
 nechť a = 9;
 návratová funkce y(){
 console.log (a); 
 }
}
nechť b = x();

Můžete vrátit funkci uvnitř funkce, přiřadit funkci proměnné a předat funkci uvnitř a funkce v JavaScriptu. To je krása jazyka. Dokážete odhadnout, jaký bude výstup, pokud vytisknete proměnnou b? Bude fungovat tisk y(). Funkce X() vrací funkci y(). Proto proměnná b ukládá funkci. Nyní můžete hádat, co se stane, když zavoláte proměnnou b? Vypíše hodnotu proměnné A: 9.

Skrytí dat můžete také dosáhnout pomocí uzávěrů. Pro lepší pochopení zvažte příklad s tlačítkem, které má v prohlížeči ID s názvem „button“. Připojíme k němu posluchač události kliknutí.

Nyní musíte vypočítat, kolikrát bylo tlačítko kliknuto. Existují dva způsoby, jak toho dosáhnout.

1. Vytvořte počet globálních proměnných a zvyšte jej po kliknutí. Tato metoda má ale chybu. Je snadné provádět úpravy v globálních proměnných, protože jsou snadno dostupné.

   Klikni na mě
   
   

2. Skrytí dat můžeme dosáhnout pomocí uzávěrů. Můžete zabalit celé addEventListener() funkce uvnitř funkce. Dělá to uzávěr. A po vytvoření uzávěru můžete vytvořit a počet proměnná a zvýšit jeho hodnotu onclick. Při použití této metody zůstane proměnná v funkční rozsaha nelze provádět žádné úpravy.

   Klikni na mě
   
   

Příbuzný: Skrytý hrdina webových stránek: Porozumění DOM

Proč jsou uzávěry důležité?

Uzávěry jsou velmi důležité nejen pokud jde o JavaScript, ale i v jiných programovacích jazycích. Jsou užitečné v mnoha scénářích, kde můžete mimo jiné vytvářet proměnné v jejich soukromém rozsahu nebo kombinovat funkce.

Zvažte tento příklad složení funkce:

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

Stejný příklad můžeme implementovat pomocí uzávěrů:

const multiply = funkce (a){
 návratová funkce (b){
 návrat a*b
 }
}
const multiplyBy2 = multiply (2);
console.log (multiplyBy2(10))

Funkce mohou používat uzávěry v následujících scénářích:

1. Implementovat funkci currying
2. K použití pro skrytí dat
3. K použití s ​​posluchači událostí
4. K použití v metodě setTimeout()

Neměli byste používat uzávěry zbytečně

Doporučuje se vyhnout se uzavření, pokud to není skutečně nutné, protože může snížit výkon vaší aplikace. Použití uzávěru bude stát hodně paměti, a pokud se uzávěry nebudou správně manipulovat, může to vést k úniky paměti.

Uzavřené nad proměnnými neuvolní sběrač odpadu JavaScriptu. Když použijete proměnné uvnitř uzávěrů, paměť neuvolní sběrač odpadků, protože prohlížeč má pocit, že se proměnné stále používají. Tyto proměnné tedy spotřebovávají paměť a snižují výkon aplikace.

Zde je příklad, který ukazuje, jak proměnné uvnitř uzávěrů nebudou shromažďovány odpadky.

 funkce f(){
 const x = 3;
 return function inner(){
 console.log (x);
 }
 }
 F()();

The proměnná x zde spotřebovává paměť, i když se často nepoužívá. Sběrač odpadu nebude moci uvolnit tuto paměť, protože je uvnitř uzávěru.

JavaScript je nekonečný

Zvládnutí JavaScriptu je nekonečný úkol, protože existuje tolik konceptů a rámců, které obvykle sami zkušení vývojáři nezkoumají. Své ovládání JavaScriptu můžete výrazně zlepšit tím, že se naučíte základy a budete je často procvičovat. Iterátory a generátory jsou některé z konceptů, na které se rozhovory ptají během rozhovorů v JavaScriptu.

Úvod do iterátorů a generátorů v JavaScriptu

Seznamte se s metodami iterátoru a generátoru v JS.

Přečtěte si další

O autorovi