Vad är stängningar i JavaScript och hur fungerar de?



Stängningar i JavaScript skapas varje gång en funktion skapas, vid tidpunkten för att skapa funktioner. Det ger bättre kontroll över koden när du använder dem.

är ett funktionsorienterat språk som ger användaren mycket frihet. Du kan skapa en funktion dynamiskt, kopiera den till en annan variabel eller skicka som ett argument till en annan funktion och ringa från en annan plats senare. Stängningar i JavaScript skapas varje gång en funktion skapas, vid tidpunkten för att skapa funktioner. I den här artikeln kommer vi att förstå avslutningar i följande sekvens:

Introduktion till stängningar i JavaScript

En förslutning är en kombination av en fungera buntade med referenser till dess omgivande tillstånd, dvs. den lexikala miljön. Med andra ord, en stängning ger dig tillgång från en inre funktion till en yttre funktion.





kodare - stängningar i javascript - edureka

De flesta utvecklare använder stängningar i JavaScript medvetet eller omedvetet. Det ger bättre kontroll över koden när du använder dem. Det är också den vanligaste frågan under någon .



Exempel:

funktion foo () {var x = 10 funktion inner () {return x} return inner} var get_func_inner = foo () console.log (get_func_inner ()) console.log (get_func_inner ()) console.log (get_func_inner ())

Produktion:

10
10
10



Här kan du komma åt variabel x som definieras i funktion foo () genom funktion inner () eftersom den senare bevarar omfångskedjan för inneslutande funktion vid tidpunkten för utförande av inneslutande funktion. Således känner den inre funktionen värdet av x genom dess omfångskedja. Så här kan du använda stängningar i JavaScript.

Praktiska stängningar

Stängningar låter dig associera den lexikala miljön med en funktion som fungerar på den informationen. Detta har uppenbara paralleller till objektorienterad programmering , där objekt tillåter oss att associera objektets egenskaper med en eller flera metoder.

Följaktligen kan du använda en förslutning var som helst som du normalt kan använda ett objekt med bara en enda metod.

Exempel:

funktion makeSizer (storlek) {returfunktion () {document.body.style.fontSize = storlek + 'px'}} var size12 = makeSizer (12) var size14 = makeSizer (14) var size16 = makeSizer (16)

Ovanstående exempel bifogas generellt som en återuppringning: en enda funktion som utförs som svar på händelsen.

Omfattningskedja

Stängningar i JavaScript har tre omfattningar som:

  • Lokalt omfång
  • Räckvidd för yttre funktioner
  • Globalt omfång

Ett vanligt misstag är att inte inse att, i fallet där den yttre funktionen i sig är en kapslad funktion, inkluderar åtkomst till den yttre funktionens omfattning den omgivande omfattningen av den yttre funktionen, vilket effektivt skapar en kedja av funktionsomfång.

// globalt omfång var x = 10 funktionssumma (a) {returfunktion (b) {returfunktion (c) {// yttre funktioner omfattningsreturfunktion (d) {// lokalomfångsretur a + b + c + d + x}}}} console.log (sum (1) (2) (3) (4)) // log 20

Det kan också skrivas utan anonyma funktioner:

// globalt omfång var x = 10 funktionssumma (a) {returfunktion sum2 (b) {returfunktion sum3 (c) {// yttre funktioner omfångsreturfunktion sum4 (d) {// lokalomfångsavkastning a + b + c + d + x}}}} var s = sum (1) var s1 = s (2) var s2 = s1 (3) var s3 = s2 (4) console.log (s3) // log 20

I exemplet ovan finns en serie kapslade funktioner som alla har tillgång till den yttre räckvidden för en funktion. Du kan alltså säga att stängningar har tillgång till alla yttre funktionsomfång inom vilka de deklareras.

Stängning inom en slinga

Du kan använda stängningar i JavaScript för att lagra en anonym funktion i varje index i en array . Låt oss ta ett exempel och se hur stängningar används i en slinga.

Exempel:

funktion yttre () {var arr = [] var i för (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]())

Produktion:

hur man lägger till Java i sökvägen

3
3
3
3

Med detta har vi kommit till slutet av vår artikel. Jag hoppas att du förstod hur stängningar i JavaScript fungerar och hur de används för att få bättre kontroll över koden.

Nu när du känner till stängningar i JavaScript, kolla in av Edureka. Webbutvecklingscertifieringsträning hjälper dig att lära dig hur du skapar imponerande webbplatser med HTML5, CSS3, Twitter Bootstrap 3, jQuery och Google API: er och distribuerar den till Amazon Simple Storage Service (S3).

Har du en fråga till oss? Vänligen nämna det i kommentarsektionen i ”Stängningar i JavaScript” så återkommer vi till dig.