Dans ce didacticiel, vous découvrirez les fermetures JavaScript à l'aide d'exemples.
Avant d'en savoir plus sur les fermetures, vous devez comprendre deux concepts:
- Fonction imbriquée
- Renvoyer une fonction
Fonction imbriquée JavaScript
En JavaScript, une fonction peut également contenir une autre fonction. C'est ce qu'on appelle une fonction imbriquée. Par exemple,
// 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
Dans le programme ci-dessus, la greet()fonction contient la displayName()fonction à l'intérieur.
Renvoyer une fonction
En JavaScript, vous pouvez également renvoyer une fonction dans une fonction. Par exemple,
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
Production
function displayName () (console.log ('Salut' + '' + nom);) Salut John
Dans le programme ci-dessus, la greet()fonction renvoie la displayNamedéfinition de fonction.
Ici, la définition de fonction retournée est affectée à la variable g1. Lorsque vous imprimez g1 avec console.log(g1), vous obtiendrez la définition de la fonction.
Pour appeler la fonction stockée dans la variable g1, nous utilisons g1()avec des parenthèses.
Fermetures JavaScript
En JavaScript, la fermeture permet d'accéder à la portée externe d'une fonction depuis l'intérieur de la fonction interne, même après la fermeture de la fonction externe. Par exemple,
// 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
Production
function displayName () (// accès à la variable name return 'Hi' + '' + name;) Salut John
Dans l'exemple ci-dessus, lorsque la greet()fonction est appelée, elle renvoie la définition de fonction de displayName.
Voici g1une référence à la displayName()fonction.
Lorsqu'il g1()est appelé, il a toujours accès à la greet()fonction.
Lorsque nous exécutons console.log(g1), il renvoie la définition de la fonction.
Le concept de fermeture existe pour d'autres langages de programmation comme Python, Swift, Ruby, etc.
Jetons un œil à un autre exemple.
// 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
Dans le programme ci-dessus, la calculate()fonction prend un seul argument xet renvoie la définition de multiply()fonction de la fonction. La multiply()fonction prend un seul argument yet retourne x * y.
Les deux multiply3et multiply4sont des fermetures.
La calculate()fonction est appelée en passant un paramètre x. Lorsque multiply3et multiply4sont appelés, la multipy()fonction a accès à l'argument x passé de la calculate()fonction externe .
La confidentialité des données
La fermeture JavaScript contribue à la confidentialité des données du programme. Par exemple,
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
Dans l'exemple ci-dessus, la sum()fonction renvoie la définition de increaseSum()fonction de la fonction.
La variable a est augmentée à l'intérieur de la increaseSum()fonction. Cependant, la valeur de la variable a peut également être modifiée en dehors de la fonction. Dans ce cas, a = a + 1;change la valeur de la variable en dehors de la fonction.
Maintenant, si vous voulez que la variable a soit augmentée uniquement à l'intérieur de la fonction, vous pouvez utiliser une fermeture. Par exemple,
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
Dans l'exemple ci-dessus, la sum()fonction définit la valeur de a sur 0 et renvoie la increaseSum()fonction.
En raison de la fermeture, même si elle sum()est déjà exécutée, a increaseSum()toujours accès à a et peut ajouter 1 à chaque fois qu'elle x()est appelée.
Et la variable a est privée pour la sum()fonction. Cela signifie que la variable a n'est accessible qu'à l'intérieur de la sum()fonction.
Même si vous le déclarez aet l'utilisez, cela n'affecte pas la avariable à l'intérieur de la sum()fonction.
Remarque : en général, les fermetures sont utilisées pour la confidentialité des données.
