Skip to content

Commit caa5efe

Browse files
committed
docs: tra second section
1 parent bfd6821 commit caa5efe

File tree

1 file changed

+35
-1
lines changed

1 file changed

+35
-1
lines changed

1-js/06-advanced-functions/10-bind/article-fr.md

Lines changed: 35 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,4 +7,38 @@ libs:
77

88
Lorsque l'on passe des méthodes objets en tant que callback, par exemple à `setTimeout`, il y un problème connu: "la perte du `this`".
99

10-
Dans ce chapitre nous verrons les façons de régler ça.
10+
Dans ce chapitre nous verrons les façons de régler ça.
11+
12+
## La perte du "this"
13+
14+
Nous avons déjà vu des exemples de la perte du `this`. Une fois qu'une méthode est passée quelque part séparement de l'objet -- `this` est perdu.
15+
16+
Voici comment cela pourrait arriver avec `setTimeout` :
17+
18+
```js run
19+
let user = {
20+
firstName: "John",
21+
sayHi() {
22+
alert(`Hello, ${this.firstName}!`);
23+
}
24+
};
25+
26+
*!*
27+
setTimeout(user.sayHi, 1000); // Hello, undefined!
28+
*/!*
29+
```
30+
31+
Comme nous pouvons le voir, la sortie n'affiche pas "John" en tant que `this.firstName`, mais `undefined` !
32+
33+
C'est car `setTimeout` a eu la fonction `user.sayHi`, séparement de l'objet. La dernière ligne pourrait être réecrite comme :
34+
35+
36+
```js
37+
let f = user.sayHi;
38+
setTimeout(f, 1000); // Perte du contexte d'user
39+
```
40+
41+
La méthode `setTimeout` dans le navigateur est un peu spéciale : elle définit `this=window` pour l'appel à la fonction (pour Node.js, `this` devient un objet "timer", mais ça n'a pas d'importance ici). Donc pour `this.firstName` il essaye de récuperer `window.firstName`, qui n'existe pas. Dans d'autres cas similaires, généralement `this` devient juste `undefined`.
42+
43+
Cette tâche est plutôt commune -- on veut passer une méthode objet quelque part ailleur (ici -- au scheduler) où elle sera appelée.
44+
Comment s'assurer qu'elle sera appelée dans le bon contexte ?

0 commit comments

Comments
 (0)