Skip to content

Commit 5a83c2a

Browse files
committed
docs: tra mid section
1 parent a733d5c commit 5a83c2a

File tree

1 file changed

+81
-1
lines changed

1 file changed

+81
-1
lines changed

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

Lines changed: 81 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -92,4 +92,84 @@ user = {
9292
// Un autre user est dans le setTimeout !
9393
```
9494

95-
La prochaine solution garantit que ce genre de chose n'arrivera pas
95+
La prochaine solution garantit que ce genre de chose n'arrivera pas
96+
97+
## Solution 2 : "bind"
98+
99+
Les fonctions fournissent une méthode intégrée, [bind](mdn:js/Function/bind) qui permet de corriger `this`.
100+
101+
La syntaxe basique est :
102+
103+
```js
104+
// Une syntaxe plus complexe arrivera bientot
105+
let boundFunc = func.bind(context);
106+
```
107+
108+
Le résultat de `func.bind(context)` est une "objet exotique" dans le style d'une fonction, qui est appellable comme une fonction et qui passe l'appel à `func` en définissant `this=context` de façon transparente.
109+
110+
En d'autres termes, appeller `boundFunc` équivaut à `func` avec un `this` corrigé.
111+
112+
Par exemple, ici `funcUser` passe l'appel à `this` tel que `this=user` :
113+
114+
```js run
115+
let user = {
116+
firstName: "John"
117+
};
118+
119+
function func() {
120+
alert(this.firstName);
121+
}
122+
123+
*!*
124+
let funcUser = func.bind(user);
125+
funcUser(); // John
126+
*/!*
127+
```
128+
129+
Ici `func.bind(user)` en tant "variante liée" de `func`, avec `this=user`.
130+
131+
Tous les arguments sont passés à l'originale `func` "tel quel", par exemple :
132+
133+
```js run
134+
let user = {
135+
firstName: "John"
136+
};
137+
138+
function func(phrase) {
139+
alert(phrase + ', ' + this.firstName);
140+
}
141+
142+
// Lie this à user
143+
let funcUser = func.bind(user);
144+
145+
*!*
146+
funcUser("Hello"); // Hello, John (l'argument "Hello" est passé, and this=user)
147+
*/!*
148+
```
149+
150+
Maintenant essayons avec une méthode objet :
151+
152+
153+
```js run
154+
let user = {
155+
firstName: "John",
156+
sayHi() {
157+
alert(`Hello, ${this.firstName}!`);
158+
}
159+
};
160+
161+
*!*
162+
let sayHi = user.sayHi.bind(user); // (*)
163+
*/!*
164+
165+
// Peut s'exécuter sans objet
166+
sayHi(); // Hello, John!
167+
168+
setTimeout(sayHi, 1000); // Hello, John!
169+
170+
// Mème si la valeur de user change dans 1 seconde
171+
// sayHi utilise la valeur pré-liée, laquelle fait référence à l'ancien objet user
172+
user = {
173+
sayHi() { alert("Another user in setTimeout!"); }
174+
};
175+
```

0 commit comments

Comments
 (0)