Skip to content
Prev Previous commit
Next Next commit
docs: tra mid section
  • Loading branch information
benjGam committed Oct 22, 2023
commit 5a83c2a9878b0602ea7ce599c84662b4b1a54179
82 changes: 81 additions & 1 deletion 1-js/06-advanced-functions/10-bind/article-fr.md
Original file line number Diff line number Diff line change
Expand Up @@ -92,4 +92,84 @@ user = {
// Un autre user est dans le setTimeout !
```

La prochaine solution garantit que ce genre de chose n'arrivera pas
La prochaine solution garantit que ce genre de chose n'arrivera pas

## Solution 2 : "bind"

Les fonctions fournissent une méthode intégrée, [bind](mdn:js/Function/bind) qui permet de corriger `this`.

La syntaxe basique est :

```js
// Une syntaxe plus complexe arrivera bientot
let boundFunc = func.bind(context);
```

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.

En d'autres termes, appeller `boundFunc` équivaut à `func` avec un `this` corrigé.

Par exemple, ici `funcUser` passe l'appel à `this` tel que `this=user` :

```js run
let user = {
firstName: "John"
};

function func() {
alert(this.firstName);
}

*!*
let funcUser = func.bind(user);
funcUser(); // John
*/!*
```

Ici `func.bind(user)` en tant "variante liée" de `func`, avec `this=user`.

Tous les arguments sont passés à l'originale `func` "tel quel", par exemple :

```js run
let user = {
firstName: "John"
};

function func(phrase) {
alert(phrase + ', ' + this.firstName);
}

// Lie this à user
let funcUser = func.bind(user);

*!*
funcUser("Hello"); // Hello, John (l'argument "Hello" est passé, and this=user)
*/!*
```

Maintenant essayons avec une méthode objet :


```js run
let user = {
firstName: "John",
sayHi() {
alert(`Hello, ${this.firstName}!`);
}
};

*!*
let sayHi = user.sayHi.bind(user); // (*)
*/!*

// Peut s'exécuter sans objet
sayHi(); // Hello, John!

setTimeout(sayHi, 1000); // Hello, John!

// Mème si la valeur de user change dans 1 seconde
// sayHi utilise la valeur pré-liée, laquelle fait référence à l'ancien objet user
user = {
sayHi() { alert("Another user in setTimeout!"); }
};
```