Какво представляват затварянията на JavaScript и как ги пишете?

JavaScript е един от най-трудните езици за програмиране за овладяване. Понякога дори старши разработчици не са в състояние да предвидят изхода на кода, който са написали. Едно от най-объркващите понятия в JavaScript е затварянето. Начинаещите обикновено се спъват в концепцията - не се притеснявайте. Тази статия бавно ще ви преведе през основните примери, за да ви помогне да разберете по-добре затварянията. Да започваме.

Какво представляват затварянията?

Затварянето е структура на функция и нейната лексикална среда, включително всички променливи в обхвата на функцията при създаването на затварянето. По-просто казано, помислете за външна функция и вътрешна функция. Вътрешната функция ще има достъп до обхвата на външната функция.

Преди да разгледате някои примери за затваряне на JavaScript, ще трябва да разберете лексикалния обхват.

Какво е лексикална среда?

Лексикалната среда е локалната памет заедно с нейната родителска среда. Вижте примера, даден по-долу, и познайте изхода на следния код:

функция външна (){ 





instagram viewer


 нека a = 10;
 console.log (y);
 атрешна();
 функция inner(){
 console.log (a);
 console.log (y);
 }
}
нека y = 9;
външен ();

Изходът ще бъде 9, 10, 9. Вътрешната функция има достъп до променливите на своя родител, the външен () функция. Следователно, на атрешна() функцията има достъп променлива а. В атрешна() функцията също има достъп променлива y поради концепцията за обхватна верига.

Родителят на външната функция е глобален, а родителят на атрешна() функцията е външен () функция. Следователно, на атрешна() функцията има достъп до променливите на своите родители. Ако се опитате да получите достъп до променлива а в глобалния обхват ще покаже грешка. Следователно, можете да кажете, че атрешна() функцията е лексикално вътре в външен () функция и лексикалния родител на външен () функцията е глобална.

Обяснени примери за затваряне на JavaScript

Тъй като сте научили за лексикалната среда, можете лесно да отгатнете изхода на следния код:

функция a(){
 нека х = 10;
 функция b(){
 console.log (x);
 }
 b();
}
a();

Изходът е 10. Въпреки че може да не се досетите на пръв поглед, това е пример за затваряне в JavaScript. Затварянията не са нищо повече от функция и тяхната лексикална среда.

Нека разгледаме пример, в който има три функции, вложени една в друга:

функция a(){ 
 нека х = 10;
 функция b(){ 
 функция c(){
 функция d(){
 console.log (x);
 }
 д();
 }
 ° С();
 }
 b();
}
a();

Ще се нарече ли все още затваряне? Отговорът е: да. Отново, затварянето е функция със своя лексикален родител. Лексикалният родител на функцията д() е ° С(), и поради концепцията за верига на обхвата, функция д() има достъп до всички променливи на външните функции и глобалните.

Вижте още един интересен пример:

функция x(){
 нека а = 9;
 функция връщане y(){
 console.log (a); 
 }
}
нека b = x();

Можете да върнете функция вътре във функция, да присвоите функция на променлива и да подадете функция в a функция в JavaScript. Това е красотата на езика. Можете ли да познаете какъв ще бъде изходът, ако отпечатате променлива б? Ще отпечата функцията y(). Функцията х() връща функция y(). Следователно, променливата б съхранява функция. Сега, можете ли да познаете какво ще се случи, ако извикате променлива б? Той отпечатва стойността на променливата а: 9.

Можете също да постигнете скриване на данни с помощта на затваряния. За по-добро разбиране помислете за пример с бутон, който има идентификатор, наречен "button" в браузъра. Нека прикачим към него слушател на събитие за щракване.

Сега трябва да изчислите броя на щракването върху бутона. Има два начина да го направите.

1. Създайте глобална променлива count и я увеличете при щракване. Но този метод има недостатък. Лесно е да се правят промени в глобалните променливи, защото те са лесно достъпни.

   Кликнете върху мен
   
   

2. Можем да постигнем скриване на данни, като използваме затваряния. Можете да увиете целия addEventListener() функция вътре във функция. Прави затваряне. И след като създадете затваряне, можете да създадете a count променлива и увеличете стойността му при щракване. При използване на този метод променливата ще остане в функционален обхват, и не може да се прави промяна.

   Кликнете върху мен
   
   

Свързани: Скритият герой на уебсайтовете: Разбиране на DOM

Защо затварянията са важни?

Затварянията са много важни не само когато става въпрос за JavaScript, но и за други езици за програмиране. Те са полезни в много сценарии, където можете да създавате променливи в техния частен обхват или да комбинирате функции, наред с други случаи.

Помислете за този пример за композиция на функции:

const умножи = (a, b) => a*b;
const multiplyBy2 = x => умножи (10, x);
console.log (умножи по2(9));

Можем да приложим същия пример, използвайки затваряния:

const умножаване = функция (a){
 функция за връщане (b){
 връщане a*b
 }
}
const multiplyBy2 = умножаване (2);
console.log (умножи по2(10))

Функциите могат да използват затваряния в следните сценарии:

1. За реализиране на функция currying
2. Да се ​​използва за скриване на данни
3. Да се ​​използва с слушатели на събития
4. Да се ​​използва в метода setTimeout()

Не трябва да използвате затварящи устройства ненужно

Препоръчително е да избягвате затваряния, освен ако наистина не е необходимо, защото те могат да намалят производителността на приложението ви. Използването на затваряне ще струва много памет и ако затварянията не се обработват правилно, това може да доведе до изтичане на памет.

Затворените над променливи няма да бъдат освободени от инструмента за събиране на боклук на JavaScript. Когато използвате променливи вътре в затварянията, паметта не се освобождава от колектора за боклук, защото браузърът усеща, че променливите все още се използват. Следователно тези променливи консумират памет и намаляват производителността на приложението.

Ето един пример, който показва как променливите вътре в затварянията няма да бъдат събирани за боклук.

 функция f(){
 const x = 3;
 функция връщане inner(){
 console.log (x);
 }
 }
 f()();

В променлива х тук консумира памет, въпреки че не се използва често. Колекторът за боклук няма да може да освободи тази памет, защото е вътре в капачката.

JavaScript е безкраен

Овладяването на JavaScript е безкрайна задача, тъй като има толкова много концепции и рамки, които обикновено не се изследват от самите опитни разработчици. Можете значително да подобрите работата си с JavaScript, като научите основите и ги практикувате често. Итераторите и генераторите са някои от концепциите, които интервютата задават по време на интервюта с JavaScript.

Въведение в итераторите и генераторите в JavaScript

Овладейте методите на итератора и генератора в JS.

Прочетете Следващото

За автора