Ce sunt închiderile JavaScript și cum le scrieți?

JavaScript este unul dintre cele mai dificile limbaje de programare de stăpânit. Uneori, nici dezvoltatorii seniori nu sunt capabili să prezică rezultatul codului pe care l-au scris. Unul dintre conceptele mai confuze din JavaScript este închiderea. Începătorii se împiedică de obicei de acest concept — nu vă faceți griji. Acest articol vă va ghida încet prin exemplele de bază pentru a vă ajuta să înțelegeți mai bine închiderile. Să începem.

Ce sunt închiderile?

O închidere este o structură a unei funcții și a mediului ei lexical, inclusiv orice variabile din domeniul de aplicare al funcției la crearea închiderii. În termeni mai simpli, luați în considerare o funcție exterioară și o funcție interioară. Funcția interioară va avea acces la domeniul de aplicare al funcției exterioare.

Înainte de a analiza câteva exemple de închidere JavaScript, va trebui să înțelegeți domeniul lexical.

Ce este un mediu lexical?

Mediul lexical este memoria locală împreună cu mediul său părinte. Consultați exemplul de mai jos și ghiciți rezultatul următorului cod:

function outer(){ 
 fie a = 10;
 console.log (y);
 interior();
 function inner(){
 console.log (a);
 console.log (y);
 }
}
fie y = 9;
exterior();

Ieșirea va fi 9, 10, 9. Funcția internă are acces la variabilele părintelui său, the exterior() funcţie. Prin urmare, cel interior() funcția poate accesa variabila a. The interior() funcția poate accesa și variabila y din cauza conceptului de lanțul domeniului de aplicare.

Părintele funcției externe este global, iar părintele funcției interior() funcția este exterior() funcţie. Prin urmare, cel interior() funcția are acces la variabilele părinților săi. Dacă încercați să accesați variabila A în domeniul global, va afișa o eroare. Prin urmare, puteți spune că interior() funcția este lexical în interiorul exterior() funcția și părintele lexical al exterior() funcția este globală.

Exemple de închidere JavaScript explicate

Deoarece ați învățat despre mediul lexical, puteți ghici cu ușurință rezultatul următorului cod:

funcția a(){
 fie x = 10;
 funcția b(){
 console.log (x);
 }
 b();
}
A();

Ieșirea este 10. Deși este posibil să nu ghiciți la prima vedere, acesta este un exemplu de închidere în JavaScript. Închiderile nu sunt altceva decât o funcție și mediul lor lexical.

Să luăm în considerare un exemplu în care există trei funcții imbricate una în cealaltă:

funcția a(){ 
 fie x = 10;
 funcția b(){ 
 funcția c(){
 funcția d(){
 console.log (x);
 }
 d();
 }
 c();
 }
 b();
}
A();

Se va numi în continuare închidere? Raspunsul este da. Din nou, o închidere este o funcție cu părintele său lexical. Părintele lexical al funcției d() este c(), și datorită conceptului de lanț al domeniului, funcție d() are acces la toate variabilele funcțiilor exterioare și la cele globale.

Aruncă o privire la un alt exemplu interesant:

funcția x(){
 fie a = 9;
 funcția de returnare y(){
 console.log (a); 
 }
}
fie b = x();

Puteți returna o funcție în interiorul unei funcții, puteți atribui o funcție unei variabile și puteți transmite o funcție în interiorul a funcția în JavaScript. Aceasta este frumusețea limbii. Puteți ghici care va fi rezultatul dacă imprimați variabila b? Va imprima funcția y(). Functia X() returnează o funcție y(). Prin urmare, variabila b stochează o funcție. Acum, poți ghici ce se va întâmpla dacă apelezi la variabilă b? Tipărește valoarea variabilei A: 9.

De asemenea, puteți obține ascunderea datelor folosind închideri. Pentru o mai bună înțelegere, luați în considerare un exemplu cu un buton care are un id numit „buton” în browser. Să-i atașăm un ascultător de evenimente clic.

Acum trebuie să calculați de câte ori este apăsat butonul. Există două moduri de a face acest lucru.

1. Creați un număr global de variabile și creșteți-l la clic. Dar această metodă are un defect. Este ușor să faci modificări în variabilele globale, deoarece acestea sunt ușor accesibile.

   Click pe mine
   
   

2. Putem obține ascunderea datelor folosind închideri. Puteți împacheta întregul addEventListener() funcție în interiorul unei funcții. Face o închidere. Și după crearea unei închideri, puteți crea un variabilă de numărare și crește valoarea acesteia la clic. Prin utilizarea acestei metode, variabila va rămâne în sfera functionala, și nu se poate face nicio modificare.

   Click pe mine
   
   

Legate de: Eroul ascuns al site-urilor web: înțelegerea DOM

De ce sunt importante închiderile?

Închiderile sunt foarte importante nu numai când vine vorba de JavaScript, ci și în alte limbaje de programare. Sunt utile într-o mulțime de scenarii în care puteți crea variabile în domeniul lor privat sau puteți combina funcții, printre alte cazuri.

Luați în considerare acest exemplu de compoziție a funcției:

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

Putem implementa același exemplu folosind închideri:

const multiplicare = funcția (a){
 funcția return (b){
 întoarce a*b
 }
}
const multiplyBy2 = multiplicare (2);
console.log (multiplyBy2(10))

Funcțiile pot folosi închideri în următoarele scenarii:

1. Pentru a implementa funcția currying
2. Pentru a fi folosit pentru ascunderea datelor
3. Pentru a fi utilizat cu ascultătorii de evenimente
4. Pentru a fi utilizat în metoda setTimeout()

Nu ar trebui să utilizați închiderile inutil

Este recomandat să evitați închiderile dacă nu este cu adevărat necesar, deoarece acestea pot reduce performanța aplicației dvs. Utilizarea închiderii va costa o mulțime de memorie, iar dacă închiderile nu sunt gestionate corect, poate duce la scurgeri de memorie.

Variabilele închise nu vor fi eliberate de colectorul de gunoi al JavaScript. Când utilizați variabile în interiorul închiderilor, memoria nu este eliberată de colectorul de gunoi, deoarece browserul simte că variabilele sunt încă în uz. Prin urmare, aceste variabile consumă memorie și reduc performanța aplicației.

Iată un exemplu care arată cum variabilele din interiorul închiderilor nu vor fi colectate de gunoi.

 funcția f(){
 const x = 3;
 funcția return inner(){
 console.log (x);
 }
 }
 f()();

The variabila x aici consumă memorie chiar dacă nu este folosită frecvent. Colectorul de gunoi nu va putea elibera această memorie deoarece se află în interiorul închiderii.

JavaScript este fără sfârșit

Stăpânirea JavaScript este o sarcină nesfârșită, deoarece există atât de multe concepte și cadre care nu sunt de obicei explorate de dezvoltatorii experimentați înșiși. Vă puteți îmbunătăți în mod semnificativ manipularea JavaScript, învățând elementele de bază și exersându-le frecvent. Iteratorii și generatorii sunt câteva dintre conceptele pe care le solicită interviurile în timpul interviurilor JavaScript.

O introducere în iteratoare și generatoare în JavaScript

Învățați metodele de iterator și generator în JS.

Citiți în continuare

Despre autor