You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: 1-js/06-advanced-functions/03-closure/article.md
+18-18Lines changed: 18 additions & 18 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -7,12 +7,12 @@ Nous savons déjà qu'une fonction peut accéder à des variables en dehors de c
7
7
8
8
Mais que se passe-t-il si les variables externes changent depuis la création d'une fonction ? La fonction obtiendra-t-elle des valeurs plus récentes ou les anciennes ?
9
9
10
-
Et si une fonction est transmise en tant que paramètre et appelée depuis un autre endroit de code, aura-t-elle accès aux variables externes au nouvel endroit ?
10
+
Et si une fonction est transmise en tant que paramètre et appelée depuis un autre endroit du code, aura-t-elle accès aux variables externes au nouvel endroit ?
11
11
12
12
Développons maintenant nos connaissances pour inclure des scénarios plus complexes.
13
13
14
-
```smart header="Nous parlerons ici des variables `let/const`"
15
-
En JavaScript, il y a 3 façons de déclarer une variable: `let`, `const`(les modernes) et `var` (le vestige du passé).
14
+
```smart header="Nous parlerons ici des variables `let`/`const`"
15
+
En JavaScript, il y a 3 façons de déclarer une variable: `let`, `const`(les modernes) et `var` (le vestige du passé).
16
16
17
17
- Dans cet article, nous utiliserons des variables `let` dans les exemples.
18
18
- Les variables, déclarées avec `const`, se comportent de la même manière, donc cet article concerne également `const`.
@@ -81,7 +81,7 @@ if (true) {
81
81
alert(phrase); // Error, no such variable!
82
82
```
83
83
84
-
Here, after `if` finishes, the `alert`below won't see the`phrase`, hence the error.
84
+
Ici, après la fin du `if`, l'`alert`ci-dessous ne verra pas`phrase`, d'où l'erreur.
85
85
86
86
C'est super, car cela nous permet de créer des variables locales, spécifiques à une branche `if`.
87
87
@@ -96,13 +96,13 @@ for (let i = 0; i < 3; i++) {
96
96
alert(i); // Error, no such variable
97
97
```
98
98
99
-
Visually, `let i`is outside of `{...}`. But the `for`construct is special here: the variable, declared inside it, is considered a part of the block.
99
+
Visuellement, `let i`est à l'extérieur de `{...}`. Mais la construction de `for`est spéciale ici : la variable déclarée à l'intérieur est considérée comme faisant partie du bloc.
100
100
101
101
## Fonctions imbriquées
102
102
103
103
Une fonction est appelée "imbriquée" lorsqu'elle est créée dans une autre fonction.
104
104
105
-
Il est facilement possible de faire cela avec JavaScript.
105
+
Il est possible de faire cela facilement avec JavaScript.
106
106
107
107
Nous pouvons l'utiliser pour organiser notre code, comme ceci :
108
108
@@ -175,7 +175,7 @@ Dans ce code simple sans fonctions, il n'y a qu'un seul environnement lexical :
175
175
176
176
Il s'agit de l'environnement Lexical dit *global*, associé à l'ensemble du script.
177
177
178
-
Sur l'image ci-dessus, le rectangle signifie Environment Record(stockage de variable) et la flèche signifie la référence externe. L'environnement lexical global n'a pas de référence externe, c'est pourquoi la flèche pointe vers `null`.
178
+
Sur l'image ci-dessus, le rectangle signifie Environment Record(stockage de variable) et la flèche signifie la référence externe. L'environnement lexical global n'a pas de référence externe, c'est pourquoi la flèche pointe vers `null`.
179
179
180
180
À mesure que le code commence à s'exécuter et se poursuit, l'environnement lexical change.
181
181
@@ -189,7 +189,7 @@ Les rectangles sur le côté droit montrent comment l'environnement lexical glob
189
189
- Initialement, elles sont à l'état "non initialisé". C'est un état interne spécial, cela signifie que le moteur connaît la variable, mais elle ne peut pas être référencée tant qu'elle n'a pas été déclarée avec `let`. C'est presque la même chose que si la variable n'existait pas.
190
190
2. Ensuite, la définition de `let phrase` apparaît. Il n'y a pas encore d'affectation, donc sa valeur est `undefined`. Nous pouvons utiliser la variable depuis ce moment.
191
191
3.`phrase` se voit attribuer une valeur.
192
-
4.`phrase` change la valeur.
192
+
4.`phrase` change de valeur.
193
193
194
194
Tout semble simple pour l'instant, non ?
195
195
@@ -199,7 +199,8 @@ Tout semble simple pour l'instant, non ?
199
199
```smart header="L'environnement lexical est un objet de spécification"
200
200
"L'environnement lexical" est un objet de spécification : il n'existe que "théoriquement" dans la [spécification du language](https://tc39.es/ecma262/#sec-lexical-environments) pour décrire comment les choses fonctionnent. nous ne pouvons pas obtenir cet objet dans notre code et le manipuler directement.
201
201
202
-
JavaScript engines also may optimize it, discard variables that are unused to save memory and perform other internal tricks, as long as the visible behavior remains as described.
202
+
Les moteurs JavaScript peuvent également l'optimiser, supprimer les variables inutilisées pour économiser de la mémoire et effectuer d'autres opérations internes, tant que le comportement visible reste conforme à la description.
203
+
203
204
```
204
205
205
206
### Step 2. Fonctions Declarations
@@ -237,12 +238,12 @@ Par exemple, pour `say("John")`, cela ressemble à ceci (l'exécution est à la
237
238
238
239

239
240
240
-
Pendant l'appel de la fonction, nous avons deux environnements lexicaux : l'intérieur(pour l'appel de la fonction) et l'extérieur(global) :
241
+
Pendant l'appel de la fonction, nous avons deux environnements lexicaux : l'intérieur(pour l'appel de la fonction) et l'extérieur(global) :
241
242
242
-
- L'environnement lexical interne correspond à l'exécution actuelle de `say`. Il a une seule propriété: `nom`, l'argument de la fonction. Nous avons appelé `say("John")`, donc la valeur du`name` est `"John"`.
243
+
- L'environnement lexical interne correspond à l'exécution actuelle de `say`. Il a une seule propriété: `name`, l'argument de la fonction. Nous avons appelé `say("John")`, donc la valeur de`name` est `"John"`.
243
244
- L'environnement lexical externe est l'environnement lexical global. Il a la variable `phrase` et la fonction elle-même.
244
245
245
-
L'environnement lexical intérieur a une référence à l'environnement `outer`(extérieur).
246
+
L'environnement lexical intérieur a une référence à l'environnement `outer`(extérieur).
246
247
247
248
**Lorsque le code veut accéder à une variable - l'environnement lexical interne est recherché en premier, puis celui externe, puis le plus externe et ainsi de suite jusqu'à celui global.**
248
249
@@ -255,7 +256,6 @@ Dans cet exemple, la recherche se déroule comme ceci :
@@ -290,7 +290,7 @@ Plus tard, lorsque `counter()` est appelé, un nouvel environnement lexical est
290
290
291
291

292
292
293
-
Maintenant, lorsque le code à l'intérieur de `counter()` recherche la variable `count`, il recherche d'abord son propre environnement lexical (vide, car il n'y a pas de variables locales), puis l'environnement lexical de l'appel externe `makeCounter()`, où le trouve et change.
293
+
Maintenant, lorsque le code à l'intérieur de `counter()` recherche la variable `count`, il recherche d'abord son propre environnement lexical (vide, car il n'y a pas de variables locales), puis l'environnement lexical de l'appel externe `makeCounter()`, où il la trouve et la change.
294
294
295
295
**Une variable est mise à jour dans l'environnement lexical où elle se trouve.**
296
296
@@ -307,7 +307,7 @@ Une [closure](https://fr.wikipedia.org/wiki/Fermeture_(informatique)) est une fo
307
307
308
308
C'est-à-dire : elles se souviennent automatiquement de l'endroit où elles ont été créées en utilisant une propriété cachée `[[Environnement]]`, puis leur code peut accéder aux variables externes.
309
309
310
-
Lors d'un entretien d'embauche, un développeur frontend reçoit assez souvent une question du genre "qu'est-ce qu'une closure ?". Une réponse valide serait une définition de la closure ainsi qu'une explication sure le fait que toutes les fonctions en JavaScript sont des closures, et peut-être quelques mots de plus sur les détails techniques : la propriété `[[Environment]]` et comment fonctionnent les environnements lexicaux.
310
+
Lors d'un entretien d'embauche, un développeur frontend reçoit assez souvent une question du genre "qu'est-ce qu'une closure ?". Une réponse valide serait une définition de la closure ainsi qu'une explication sur le fait que toutes les fonctions en JavaScript sont des closures, et peut-être quelques mots de plus sur les détails techniques : la propriété `[[Environment]]` et comment fonctionnent les environnements lexicaux.
311
311
```
312
312
313
313
## Garbage collection
@@ -333,7 +333,7 @@ let g = f(); // g.[[Environment]] stocke une référence à l'environnement lexi
333
333
// de l'appel f() correspondant
334
334
```
335
335
336
-
veuillez noter que si `f()` est appelé plusieurs fois et que les fonctions résultantes sont sauvegardées, tous les objets d'environnement lexicaux correspondants seront également conservés en mémoire. tous les 3 dans le code ci-dessous :
336
+
Veuillez noter que si `f()` est appelé plusieurs fois et que les fonctions résultantes sont sauvegardées, tous les objets correspondants de l'environnement lexical seront également conservés en mémoire. Dans le code ci-dessous, ils sont tous les trois :
337
337
338
338
```js
339
339
functionf() {
@@ -347,7 +347,7 @@ function f() {
347
347
let arr = [f(), f(), f()];
348
348
```
349
349
350
-
un objet environnement lexical meurt lorsqu'il devient inaccessible (comme tout autre objet). en d'autres termes, il n'existe que s'il existe au moins une fonction imbriquée qui le référence.
350
+
Un objet environnement lexical meurt lorsqu'il devient inaccessible (comme tout autre objet). En d'autres termes, il n'existe que s'il existe au moins une fonction imbriquée qui le référence.
351
351
352
352
Dans le code ci-dessous, une fois que la fonction imbriquée est supprimée, son environnement lexical englobant (et donc la `value`) est nettoyé de la mémoire :
353
353
@@ -392,7 +392,7 @@ let g = f();
392
392
g();
393
393
```
394
394
395
-
Comme vous avez pu le constater, cette variable n'existe pas! En théorie, elle devrait être accessible, mais le moteur l'a optimisé.
395
+
Comme vous avez pu le constater, cette variable n'existe pas! En théorie, elle devrait être accessible, mais le moteur l'a optimisée.
396
396
397
397
Cela peut conduire à des problèmes de débogage amusants (voire fastidieux). L'un d'eux -- nous pouvons voir une variable externe portant le même nom au lieu de celle attendue :
0 commit comments