Ghid de închidere JavaScript

Introducere

├Änchiderea este un concept oarecum abstract de limba JavaScript ╚Öi se strecura pe partea compilatorului programului. Cu toate acestea, ├«n╚Ťelegerea modului ├«n care func╚Ťiile de interpretare JavaScript, func╚Ťiile, zonele ╚Öi mediile lexicale sunt esen╚Ťiale pentru a profita de ├«ntregul s─âu poten╚Ťial.

În acest articol, vom încerca să demisim aceste concepte și să oferim un ghid simplu pentru Închiderea JavaScript

Ce este o închidere?

├Än primul r├ónd, s─â ne uit─âm la defini╚Ťia oficial─â de ├«nchidere MDN:

O ├«nchidere este combina╚Ťia unei func╚Ťii grupate ( blocat) cu referiri la starea sa ├«nconjur─âtoare (mediul lexical). Cu alte cuvinte, o ├«nchidere ofer─â acces la o func╚Ťie extern─â dintr-o func╚Ťie intern─â.

├Än termeni mai simpli, o ├«nchidere este o func╚Ťie care are acces la ├«ndem├óna unei func╚Ťii externe. Pentru a ├«n╚Ťelege acest lucru, hai s─â arunc─âm o privire la modul ├«n care zonele lucreaz─â ├«n JavaScript. Domeniul de aplicare este ├«mp─âr╚Ťit pe scar─â larg─â ├«n dou─â tipuri: domeniul global ╚Öi domeniul local:

  • Gama global─â – variabilele definite ├«n afara unei func╚Ťii. Variabilele pot fi accesate ├«n acest domeniu ╚Öi le pot modifica de oriunde ├«n program, deci numele „Global”.
  • variabile locale definite ├«n cadrul unei func╚Ťii. Aceste variabile sunt specifice func╚Ťiei din una care sunt definite, astfel ├«nc├ót acestea sunt numite „locale”.

Să ne uităm la o variabilă globală și locală în JavaScript:

let name = "Joe";function hello(){ let message = "Hello"; console.log(message + " " +name);}

├Än exemplul anterior, domeniul de aplicare al name este global, adic─â pute╚Ťi accesa de oriunde. Pe de alt─â parte, message este definit─â ├«ntr-o func╚Ťie, gama este local─â la func╚Ťia hello().

JavaScript utilizeaz─â domeniul de aplicare lexical atunci c├ónd vine vorba de zonele func╚Ťionale. Ceea ce ├«nseamn─â c─â intervalul unei variabile este definit─â de pozi╚Ťia defini╚Ťiei sale ├«n codul surs─â. Acest lucru ne permite s─â ne referim la variabilele globale ├«n zonele mai mici. O variabil─â local─â poate utiliza o variabil─â global─â, dar invers nu este posibil─â.

en

iv id = „49bf8416ab”

Acest cod duce la:

10error: Uncaught ReferenceError: y is not defined

Func╚Ťia inner() poate fi referin╚Ť─â x a╚Öa cum este definit ├«n Func╚Ťia . Cu toate acestea, declara╚Ťia console.log(y) ├«n Func╚Ťia nu se poate referi la variabila y Deoarece este definit─â ├«n intervalul de func╚Ťii inner().

În plus, în acest scenariu:

let x = 10;function func1(){ console.log(x);}function func2() { let x = 20; func1();}func2();

Ieșirea va fi:

10

atunci c├ónd sun─âm iv id = „3f75Bea169” din interiorul func2(), avem o variabil─â local─â x. Cu toate acestea, aceast─â variabil─â este pe deplin irelevant─â pentru func1(), deoarece nu este accesibil ├«n func1().

a╚Öa, func1() Verifica╚Ťi dac─â exist─â o variabil─â global─â cu acel identificator disponibil ╚Öi utiliza╚Ťi-l, ceea ce duce la valoarea 10.

Închiderea sub capota

O ├«nchidere este o func╚Ťie care are acces la variabilele p─ârin╚Ťilor dvs., chiar dac─â func╚Ťia extern─â sa ├«ntors. Cu alte cuvinte, o ├«nchidere are trei domenii:

  • gama local─â: Accesul la variabile la propriul dvs. REACH
  • Domeniul de aplicare al func╚Ťiei principale: Acces la variabilele din partea principal─â
  • REACH GLOBAL: Acces la variabile globale

S─â ne uit─âm la o ├«nchidere la locul de munc─â, f─âc├ónd o func╚Ťie care returneaz─â o alt─â func╚Ťie:

function outer() { let x = 3 return function inner(y) { return x*y }}let multiplyByThree = outer();console.log(multiplyByThree(2));

Acest lucru rezultă în:

6

dac─â facem:

console.log(multiplyByThree);

suntem primi╚Ťi cu:

function inner(y) { return x * y; }

hai să revizuim codul pas cu pas pentru a vedea ce se întâmplă sub capota:

  • Func╚Ťia este definit─â ├«n domeniul global.
  • outer() este invocat─â ╚Öi returneaz─â o func╚Ťie care este atribuit─â multiplyByThree.
  • este creat un nou context de execu╚Ťie pentru .
    • variabil x este setat la 3.
  • Returneaz─â o func╚Ťie numit─â inner().
  • Referin╚Ťa la inner() este atribuit─â multiplyByThree.
  • C├ónd func╚Ťia extern─â termin─â execu╚Ťia, toate variabilele sunt ╚Öterse la ├«ndem├ón─â.
  • rezultat al apelului la func╚Ťia multiplyByThree(2) este ├«nregistrat─â pe consola.
  • inner() Este invocat─â cu 2 ca argument. Apoi, y este setat la 2.
  • ca inner() Conserv─â lan╚Ťul de reac╚Ťie al func╚Ťiei sale principale, la momentul execut─ârii ve╚Ťi avea acces la valoarea x.
  • returneaz─â 6 care este ├«nregistrat ├«n consola.

├Än concluzie, chiar ╚Öi dup─â exteriorul func╚Ťiei ├«nceteaz─â s─â mai existe, interiorul func╚Ťia are acces la variabilele definite ├«n Domeniul de aplicare din func╚Ťia exterioar─â.

Închiderile de vizualizare

Închiderile pot fi afișate prin consola de dezvoltatori:

function outer() { let x = 3 return function inner(y) { return x*y }}let multiplyByThree = outside();console.dir(multiplyByThree);

La executarea codului anterior ├«n consola dezvoltatorului, putem vedea c─â avem acces la contextul inner(y). Dup─â o inspec╚Ťie mai atent─â, putem vedea c─â o parte din contextul s─âu este o matrice ], care con╚Ťine cele trei zone despre care vorbim.

╚Öi aici, Gama de domenii con╚Ťine domeniul de aplicare al func╚Ťiei sale principale, care con╚Ťine x = 3:

cazuri de utilizare obișnuită

├«nchiderile sunt utile deoarece acestea Ajuta╚Ťi datele grupului american cu func╚Ťii care func╚Ťioneaz─â ├«n aceste date. Acest lucru ar putea suna unii dintre voi care sunt familiariza╚Ťi cu programarea orientat─â spre obiecte (OOP). Ca rezultat, putem folosi ├«nchideri oriunde putem folosi un obiect.

Un alt caz de utilizare important─â a ├«nchiderilor este atunci c├ónd avem nevoie de variabilele noastre de a fi private, deoarece variabilele definite ├«n scopul unei ├«nchideri Ele sunt ├«n afara limitelor func╚Ťiilor din afara acestuia. ├Än acela╚Öi timp, ├«nchiderile au acces la variabile ├«n lan╚Ťul lor de interval.

S─â vedem urm─âtorul exemplu pentru a ├«n╚Ťelege mai bine:

const balance = (function() { let privateBalance = 0; return { increment: function(value){ privateBalance += value; return privateBalance; }, decrement: function(value){ privateBalance -= value; return privateBalance; }, show: function(){ return privateBalance; } }})()console.log(balance.show()); // 0console.log(balance.increment(500)); // 500console.log(balance.decrement(200)); // 300

├Än acest exemplu, am definit o variabil─â constant─â balance ╚Öi configura╚Ťi-l ca valoare returnat─â a func╚Ťiei noastre anonime. Realiza╚Ťi privateBalance poate fi modificat─â numai prin apelarea metodelor ├«n balance.

Concluzie

De╚Öi ├«nchiderile sunt un concept foarte specializat ├«n JavaScript, ele sunt un instrument important ├«ntr-un set bun de instrumente pentru dezvoltatorii JavaScript. Acestea pot fi folosite pentru a implementa solu╚Ťii elegant, care altfel ar fi o sarcin─â dificil─â.

├Än acest articol, am ├«nv─â╚Ťat mai ├«nt├ói pu╚Ťin despre c├ómpuri ╚Öi cum sunt implementate ├«n JavaScript. Apoi folosim aceste cuno╚Ötin╚Ťe pentru a ├«n╚Ťelege modul ├«n care ├«nchiderile func╚Ťioneaz─â sub lucrarea capotei ╚Öi cum s─â le folosi╚Ťi.

Leave a Comment

Adresa ta de email nu va fi publicată. Câmpurile obligatorii sunt marcate cu *