JavaScript-stängningar

I denna handledning lär du dig om JavaScript-stängning med hjälp av exempel.

Innan du lär dig om nedläggningar måste du förstå två begrepp:

  • Kapslad funktion
  • Returnerar en funktion

JavaScript kapslad funktion

I JavaScript kan en funktion också innehålla en annan funktion. Detta kallas en kapslad funktion. Till exempel,

 // nested function example // outer function function greet(name) ( // inner function function displayName() ( console.log('Hi' + ' ' + name); ) // calling inner function displayName(); ) // calling outer function greet('John'); // Hi John

I ovanstående program greet()innehåller displayName()funktionen funktionen inuti den.

Returnera en funktion

I JavaScript kan du också returnera en funktion inom en funktion. Till exempel,

 function greet(name) ( function displayName() ( console.log('Hi' + ' ' + name); ) // returning a function return displayName; ) const g1 = greet('John'); console.log(g1); // returns the function definition g1(); // calling the function

Produktion

 function displayName () (console.log ('Hi' + '' + name);) Hej John

I ovanstående program greet()returnerar displayNamefunktionen funktionsdefinitionen.

Här tilldelas den returnerade funktionsdefinitionen till variabeln g1. När du skriver ut g1 med console.log(g1)får du funktionsdefinitionen.

För att anropa funktionen som är lagrad i g1-variabeln använder vi g1()med parenteser.

JavaScript-stängningar

I JavaScript ger stängning åtkomst till det yttre omfånget för en funktion inifrån den inre funktionen, även efter att den yttre funktionen har stängts. Till exempel,

 // javascript closure example // outer function function greet() ( // variable defined outside the inner function let name = 'John'; // inner function function displayName() ( // accessing name variable return 'Hi' + ' ' + name; ) return displayName; ) const g1 = greet(); console.log(g1); // returns the function definition console.log(g1()); // returns the value

Produktion

 function displayName () (// accessing name variable return 'Hi' + '' + name;) Hej John

I ovanstående exempel, när greet()funktion anropas, returnerar den funktionsdefinitionen av displayName.

Här g1är en hänvisning till displayName()funktionen.

När det g1()anropas har det fortfarande tillgång till greet()funktionen.

När vi kör console.log(g1)returnerar funktionsdefinitionen.

Begreppet stängning finns för andra programmeringsspråk som Python, Swift, Ruby, etc.

Låt oss ta en titt på ett annat exempel.

 // closure example function calculate(x) ( function multiply(y) ( return x * y; ) return multiply; ) const multiply3 = calculate(3); const multiply4 = calculate(4); console.log(multiply3); // returns calculate function definition console.log(multiply3()); // NaN console.log(multiply3(6)); // 18 console.log(multiply4(2)); // 8

I ovanstående program calculate()tar funktionen ett enda argument xoch returnerar funktionsdefinitionen för multiply()funktionen. Den multiply()funktionen tar ett enda argument yoch återvänder x * y.

Båda multiply3och multiply4är stängningar.

Den calculate()funktionen kallas passerar en parameter x. När multiply3och multiply4anropas har multipy()funktionen tillgång till det passerade x-argumentet för den yttre calculate()funktionen.

Dataintegritet

JavaScript-stängning hjälper till med dataskyddet för programmet. Till exempel,

 let a = 0; function sum() ( function increaseSum() ( // the value of a is increased by 1 return a = a + 1; ) return increaseSum; ) const x = sum(); console.log(x()); // 1 console.log(x()); // 2 console.log(x()); // 3 a = a + 1; console.log(a); // 4

I exemplet ovan sum()returnerar funktionen funktionsdefinitionen för increaseSum()funktionen.

Variabeln a ökas inuti increaseSum()funktionen. Värdet på en variabel kan dock också ändras utanför funktionen. I detta fall a = a + 1;ändras värdet på variabeln utanför funktionen.

Nu, om du vill att en variabel bara ska ökas inuti funktionen kan du använda en stängning. Till exempel,

 function sum() ( let a = 0; function increaseSum() ( // the value of a is increased by 1 return a = a + 1; ) return increaseSum; ) let x = sum(); let a = 5; console.log(x()); // 1 console.log(x()); // 2 console.log(a); // 5

I exemplet ovan sum()ställer funktionen in värdet a till 0 och returnerar increaseSum()funktionen.

På grund av stängningen, även om den sum()redan har utförts, har den increaseSum()fortfarande tillgång till a och kan lägga till 1 till en varje gång som x()anropas.

Och variabeln är privat för sum()funktionen. Det betyder att variabeln bara kan nås inuti sum()funktionen.

Även om du deklarerar aoch använder det påverkar det inte avariabeln inuti sum()funktionen.

Obs! I allmänhet används stängningar för dataskydd.

Intressanta artiklar...