In questo tutorial imparerai a conoscere le chiusure JavaScript con l'aiuto di esempi.
Prima di conoscere le chiusure, è necessario comprendere due concetti:
- Funzione annidata
- Restituzione di una funzione
Funzione annidata JavaScript
In JavaScript, una funzione può contenere anche un'altra funzione. Questa è chiamata funzione annidata. Per esempio,
// 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
Nel programma sopra, la greet()funzione contiene la displayName()funzione al suo interno.
Restituzione di una funzione
In JavaScript, puoi anche restituire una funzione all'interno di una funzione. Per esempio,
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
Produzione
function displayName () (console.log ('Hi' + '' + name);) Ciao John
Nel programma precedente, la greet()funzione restituisce la displayNamedefinizione della funzione.
Qui, la definizione della funzione restituita viene assegnata alla variabile g1. Quando stampi g1 usando console.log(g1), otterrai la definizione della funzione.
Per chiamare la funzione memorizzata nella variabile g1, la usiamo g1()con le parentesi.
Chiusure JavaScript
In JavaScript, la chiusura fornisce l'accesso all'ambito esterno di una funzione dall'interno della funzione interna, anche dopo che la funzione esterna è stata chiusa. Per esempio,
// 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
Produzione
function displayName () (// accesso alla variabile name return 'Hi' + '' + name;) Ciao John
Nell'esempio precedente, quando greet()viene chiamata la funzione, restituisce la definizione della funzione di displayName.
Ecco g1un riferimento alla displayName()funzione.
Quando g1()viene chiamato, ha ancora accesso alla greet()funzione.
Quando eseguiamo console.log(g1), restituisce la definizione della funzione.
Il concetto di chiusura esiste per altri linguaggi di programmazione come Python, Swift, Ruby, ecc.
Diamo un'occhiata a un altro esempio.
// 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
Nel programma precedente, la calculate()funzione accetta un singolo argomento xe restituisce la definizione della multiply()funzione della funzione. La multiply()funzione accetta un singolo argomento ye restituisce x * y.
Entrambi multiply3e multiply4sono chiusure.
La calculate()funzione viene chiamata passando un parametro x. Quando multiply3e multiply4vengono chiamati, la multipy()funzione ha accesso all'argomento x passato della calculate()funzione esterna .
Privacy dei dati
La chiusura JavaScript aiuta nella riservatezza dei dati del programma. Per esempio,
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
Nell'esempio precedente, la sum()funzione restituisce la definizione della increaseSum()funzione della funzione.
La variabile a viene aumentata all'interno della increaseSum()funzione. Tuttavia, il valore della variabile a può essere modificato anche al di fuori della funzione. In questo caso, a = a + 1;cambia il valore della variabile al di fuori della funzione.
Ora, se vuoi che la variabile a venga aumentata solo all'interno della funzione, puoi usare una chiusura. Per esempio,
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
Nell'esempio precedente, la sum()funzione imposta il valore di a su 0 e restituisce la increaseSum()funzione.
A causa della chiusura, anche se sum()è già eseguita, increaseSum()ha ancora accesso a a e può aggiungere 1 a a ogni volta che x()viene chiamato.
E la variabile a è privata della sum()funzione. Significa che è possibile accedere alla variabile a solo all'interno della sum()funzione.
Anche se lo dichiari ae lo usi, non influisce sulla avariabile all'interno della sum()funzione.
Nota : in genere, le chiusure vengono utilizzate per la riservatezza dei dati.
