Što su zatvaranja u JavaScript-u i kako funkcioniraju?

je jezik orijentiran na funkcije koji korisniku daje puno slobode. Možete stvoriti funkciju dinamički, kopirati je u drugu varijablu ili proslijediti kao argument drugoj funkciji i kasnije pozvati s drugog mjesta. Zatvaranja u JavaScript-u kreiraju se svaki put kad se stvori funkcija, u vrijeme stvaranja funkcije. U ovom ćemo članku razumijevanje zatvaranja shvatiti u sljedećem slijedu:

• Uvod u Zatvaranja u JavaScript
• Praktična zatvaranja
• Scope Chain
• Zatvaranje unutar petlje

Uvod u Zatvaranja u JavaScript

Zatvarač je kombinacija a funkcija u paketu s referencama na okolno stanje, tj. leksičko okruženje. Drugim riječima, zatvarač vam omogućuje pristup unutarnje funkcije opsegu vanjske funkcije.

Većina programera koristi zatvaranja u JavaScriptu svjesno ili nesvjesno. Pruža bolju kontrolu nad kodom prilikom njihove upotrebe. Također je najčešće postavljano pitanje tijekom bilo kojeg .

Primjer:

funkcija foo () {var x = 10 funkcija unutarnja () {povratak x} povratak unutarnja} var get_func_inner = foo () console.log (get_func_inner ()) console.log (get_func_inner ()) console.log (get_func_inner ())

Izlaz:

10
10
10

Ovdje možete pristupiti varijabilna x koja je definirana u funkciji foo () kroz funkciju internal () jer kasnija čuva lanac opsega funkcije ograđivanja u vrijeme izvršenja funkcije ograđivanja. Dakle, unutarnja funkcija zna vrijednost x kroz svoj lanac opsega. Na ovaj način možete koristiti zatvarače u JavaScript-u.

Praktična zatvaranja

Zatvaranja omogućuju povezivanje leksičkog okruženja s funkcijom koja djeluje na tim podacima. To ima očite paralele s objektno orijentirano programiranje , gdje nam objekti omogućuju povezivanje svojstava objekta s jednom ili više metoda.

Slijedom toga, možete koristiti zatvarač bilo gdje da biste obično mogli koristiti objekt samo jednom metodom.

Primjer:

funkcija makeSizer (veličina) {return funkcija () {document.body.style.fontSize = veličina + 'px'}} var size12 = makeSizer (12) var size14 = makeSizer (14) var size16 = makeSizer (16)

Gornji je primjer obično priložen kao povratni poziv: jedna funkcija koja se izvršava kao odgovor na događaj.

Scope Chain

Zatvaranja u JavaScript-u imaju tri opsega, kao što su:

• Lokalni opseg
• Opseg vanjskih funkcija
• Globalni opseg

Uobičajena pogreška je ne shvaćanje da, u slučaju kada je vanjska funkcija sama ugniježđena funkcija, pristup opsegu vanjske funkcije uključuje opseg obuhvaćanja vanjske funkcije, učinkovito stvarajući lanac opsega funkcija.

// globalni opseg var x = 10 funkcija zbroj (a) {povratna funkcija (b) {povratna funkcija (c) {// vanjske funkcije opseg povratna funkcija (d) {// lokalni opseg povratak a + b + c + d + x}}}} console.log (sum (1) (2) (3) (4)) // zapis 20

Može se napisati i bez anonimnih funkcija:

c ++ operator opsega

// globalni opseg var x = 10 funkcija sum (a) {return funkcija sum2 (b) {return funkcija sum3 (c) {// vanjske funkcije opseg return funkcija sum4 (d) {// lokalni opseg return a + b + c + d + x}}}} var s = zbroj (1) var s1 = s (2) var s2 = s1 (3) var s3 = s2 (4) console.log (s3) // log 20

U gornjem primjeru postoji niz ugniježđenih funkcija koje sve imaju pristup vanjskom opsegu funkcije. Tako možete reći da zatvarači imaju pristup svim opsezima vanjskih funkcija unutar kojih su deklarirani.

Zatvaranje unutar petlje

Možete koristiti zatvarače u JavaScriptu za pohranu anonimne funkcije na svakom indeksu niz . Uzmimo primjer i vidjet ćemo kako se zatvarači koriste unutar petlje.

Primjer:

funkcija external () {var arr = [] var i for (i = 0 i<3 i++) { // storing anonymus function arr[i] = function () { return i } } // returning the array. return arr } var get_arr = outer() console.log(get_arr[0]()) console.log(get_arr[1]()) console.log(get_arr[2]())

Izlaz:

3
3
3
3

Ovime smo došli do kraja našeg članka. Nadam se da ste razumjeli kako zatvaranja u JavaScript-u rade i kako se koriste za bolju kontrolu koda.

Sad kad znate za Zatvaranje u JavaScript-u, pogledajte od Edureke. Obuka za certificiranje web razvoja pomoći će vam naučiti kako stvoriti impresivne web stranice pomoću HTML5, CSS3, Twitter Bootstrap 3, jQuery i Google API-ja i rasporediti ih na Amazon Simple Storage Service (S3).

Imate pitanje za nas? Molimo vas da ga spominjete u odjeljku za komentare u 'Zatvaranje u JavaScript', a mi ćemo vam se javiti.