Шта су ЈаваСцрипт затварања и како их пишете?

ЈаваСцрипт је један од најзахтевнијих програмских језика за савладавање. Понекад чак ни старији програмери нису у стању да предвиде излаз кода који су написали. Један од збуњујућих концепата у ЈаваСцрипт-у су затварања. Почетници се обично спотакну о концепту - не брините. Овај чланак ће вас полако водити кроз основне примере који ће вам помоћи да боље разумете затварања. Хајде да почнемо.

Шта су затварања?

Затварање је структура функције и њеног лексичког окружења, укључујући све променљиве у опсегу функције при креирању затварања. Једноставније речено, размотрите спољну функцију и унутрашњу функцију. Унутрашња функција ће имати приступ опсегу спољне функције.

Пре него што погледате неке примере затварања ЈаваСцрипт-а, мораћете да разумете лексички опсег.

Шта је лексичко окружење?

Лексичко окружење је локална меморија заједно са својим родитељским окружењем. Погледајте пример дат у наставку и погодите излаз следећег кода:

функција спољна(){ 
 нека је а = 10;
 цонсоле.лог (и);
 унутрашњи();
 функција иннер(){
 цонсоле.лог (а);
 цонсоле.лог (и);
 }
}
нека је и = 9;
спољашњи();

Излаз ће бити 9, 10, 9. Унутрашња функција има приступ варијаблама свог родитеља, тхе спољашњи() функција. Отуда унутрашњи() функција може приступити променљива а. Тхе унутрашњи() функција такође може да приступи променљива и због концепта опсег ланца.

Родитељ спољне функције је глобални, а родитељ функције унутрашњи() функција је спољашњи() функција. Отуда унутрашњи() функција има приступ варијаблама својих родитеља. Ако покушате да приступите променљивој а у глобалном опсегу, приказаће грешку. Дакле, можете рећи да је унутрашњи() функција је лексички унутар спољашњи() функција, и лексички родитељ спољашњи() функција је глобална.

Објашњени примери затварања ЈаваСцрипт-а

Пошто сте научили о лексичком окружењу, лако можете погодити излаз следећег кода:

функција а(){
 нека је к = 10;
 функција б(){
 цонсоле.лог (к);
 }
 б();
}
а();

Излаз је 10. Иако то можда нећете погодити на први поглед, ово је пример затварања у ЈаваСцрипт-у. Затварања нису ништа друго до функција и њихово лексичко окружење.

Хајде да размотримо пример где постоје три функције угнежђене једна у другу:

функција а(){ 
 нека је к = 10;
 функција б(){ 
 функција ц(){
 функција д(){
 цонсоле.лог (к);
 }
 д();
 }
 ц();
 }
 б();
}
а();

Хоће ли се то и даље звати затварањем? Одговор је: да. Опет, затварање је функција са својим лексичким родитељем. Лексички родитељ функције д() је ц(), а због концепта ланца опсега функција д() има приступ свим варијаблама спољашњих функција и глобалних.

Погледајте још један занимљив пример:

функција к(){
 нека је а = 9;
 повратна функција и(){
 цонсоле.лог (а); 
 }
}
нека б = к();

Можете вратити функцију унутар функције, доделити функцију променљивој и проследити функцију унутар а функција у ЈаваСцрипт-у. Ово је лепота језика. Можете ли да погодите какав ће бити резултат ако одштампате променљиву б? Исписаће функцију и(). Функција Икс() враћа функцију и(). Дакле, променљива б чува функцију. Сада, можете ли погодити шта ће се догодити ако позовете променљиву б? Штампа вредност променљиве а: 9.

Такође можете постићи сакривање података помоћу затварања. За боље разумевање, размотрите пример са дугметом које има ИД под називом „дугме“ у прегледачу. Хајде да му приложимо слушалац догађаја клика.

Сада треба да израчунате колико пута је дугме кликнуто. Постоје два начина да се то уради.

1. Направите глобалну променљиву цоунт и повећајте је на клик. Али овај метод има недостатак. Лако је направити модификације у глобалним варијаблама јер су им лако доступне.

   Кликни ме
   
   

2. Сакривање података можемо постићи коришћењем затварања. Можете умотати целу аддЕвентЛистенер() функција унутар функције. То чини затварање. И након креирања затварања, можете креирати а цоунт променљива и повећати његову вредност на клик. Коришћењем ове методе, променљива ће остати у функционални обим, и не може се извршити никаква модификација.

   Кликни ме
   
   

Повезан: Скривени херој веб локација: разумевање ДОМ-а

Зашто су затварања важна?

Затварања су веома важна не само када је у питању ЈаваСцрипт, већ и у другим програмским језицима. Они су корисни у многим сценаријима у којима можете креирати променљиве у њиховом приватном опсегу или комбиновати функције, између осталих случајева.

Размотрите овај пример композиције функције:

цонст мултипли = (а, б) => а*б;
цонст мултиплиБи2 = к => помножи (10, к);
цонсоле.лог (мултиплиБи2(9));

Можемо имплементирати исти пример користећи затварања:

цонст мултипли = фунцтион (а){
 функција повратка (б){
 врати а*б
 }
}
цонст мултиплиБи2 = помножити (2);
цонсоле.лог (мултиплиБи2(10))

Функције могу да користе затварања у следећим сценаријима:

1. За имплементацију функције цурриинг
2. Користи се за скривање података
3. Да се ​​користи са слушаоцима догађаја
4. Користи се у методи сетТимеоут()

Не би требало да користите затвараче непотребно

Препоручљиво је да избегавате затварања осим ако заиста нису потребна јер она могу да смање перформансе ваше апликације. Коришћење затварача ће коштати много меморије, а ако се затварачима не рукује правилно, то може довести до цурење меморије.

Затворене променљиве неће бити ослобођене ЈаваСцрипт-овим сакупљачем смећа. Када користите променљиве унутар затварача, сакупљач смећа не ослобађа меморију јер претраживач сматра да су променљиве још увек у употреби. Дакле, ове варијабле троше меморију и смањују перформансе апликације.

Ево примера који показује како се варијабле унутар затварања неће сакупљати као смеће.

 функција ф(){
 цонст к = 3;
 ретурн функција иннер(){
 цонсоле.лог (к);
 }
 }
 ф()();

Тхе променљива к овде троши меморију иако се не користи често. Сакупљач смећа неће моћи да ослободи ову меморију јер је унутар затварача.

ЈаваСцрипт је бескрајан

Овладавање ЈаваСцрипт-ом је бескрајан задатак, јер постоји толико много концепата и оквира које обично сами искусни програмери не истражују. Можете значајно побољшати своје руковање ЈаваСцрипт-ом тако што ћете научити основе и често их практиковати. Итератори и генератори су неки од концепата које интервјуи постављају током ЈаваСцрипт интервјуа.

Увод у итераторе и генераторе у ЈаваСцрипт-у

Научите методе итератора и генератора у ЈС-у.

Реад Нект

О аутору