Comment la méthode `bind()` de JavaScript contrôle-t-elle le mot-clé `this` ?

Comprendre la méthode JavaScript bind()

La méthode bind() de JavaScript vous permet de créer une nouvelle fonction en définissant explicitement la valeur du mot-clé this dans cette fonction. Voici comment cela fonctionne :

Objectif de bind()

bind() renvoie une nouvelle fonction qui lie le mot-clé this à un objet spécifique spécifié comme premier argument. Cela garantit que lorsque la fonction liée est appelée, le mot-clé this fait toujours référence à l'objet spécifié, quelle que soit la manière dont il est invoqué.

Exemple d'utilisation

Considérez le code suivant :

var myButton = {
  content: 'OK',
  click() {
    console.log(this.content + ' clicked');
  }
};

myButton.click();
var looseClick = myButton.click;
looseClick(); // not bound, 'this' is not myButton - it is the globalThis
var boundClick = myButton.click.bind(myButton);
boundClick(); // bound, 'this' is myButton

Dans cet exemple, nous avons une méthode click() définie dans un objet myButton. Lorsque click() est invoqué directement sur l'objet, il affiche correctement "OK cliqué" car cela fait référence à l'objet myButton. Cependant, si nous attribuons click() à la variable looseClick, qui est essentiellement une fonction gratuite, le mot-clé this ne fait plus référence à myButton et prend par défaut le contexte global.

Pour garantir que le mot-clé this reste lié à myButton, nous utilisons bind(). La variableboundClick est créée en liant l'objet myButton à la méthode click() à l'aide de bind(myButton). LorsqueboundClick() est invoqué, le mot-clé this est correctement lié à myButton, garantissant le comportement souhaité.

Liaison d'arguments supplémentaires

Vous pouvez également transmettre des arguments supplémentaires à bind() après l'objet this . Ces arguments seront pré-liés à la nouvelle fonction, vous permettant de créer facilement des fonctions partiellement appliquées. Par exemple :

var sum = function(a, b) {
  return a + b;
};

var add5 = sum.bind(null, 5);
console.log(add5(10)); // prints 15

Dans cet exemple, nous lions la fonction sum() à null (ce qui signifie qu'il n'y a pas d'initiale pour cette valeur) et passons 5 comme premier argument. La fonction add5() résultante peut alors être invoquée avec un seul argument (au lieu des deux habituels), et elle ajoutera toujours 5 à cet argument.

Conclusion

La méthode bind() est un outil puissant en JavaScript pour contrôler explicitement le mot-clé this. Il vous permet de créer facilement des fonctions liées qui conservent le contexte correct lorsqu'elles sont invoquées indépendamment. Bien qu'il ne soit peut-être plus aussi couramment utilisé avec l'avènement des fonctions fléchées, bind() reste un outil précieux pour des scénarios spécifiques où le contrôle du mot-clé this est crucial.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!