Quand et pourquoi JavaScript bind() est-il nécessaire ?

Pourquoi JavaScript bind() est-il nécessaire ?

Comprendre la liaison contextuelle de JavaScript

En JavaScript, la valeur de this est déterminée par le contexte d'invocation de la fonction . Cependant, ce contexte n'est pas toujours souhaité lors de l'utilisation de fonctions de rappel ou de gestionnaires d'événements.

Considérez l'exemple suivant :

<code class="javascript">this.name = "John";

var myName = {
  name: "Tom",
  getName: function() {
    return this.name;
  }
};

var storeMyName = myName.getName; // example 1
var storeMyName2 = myName.getName.bind(myName); // example 2
var storeMyName3 = myName.getName(); // example 3</code>

L'appel de storeMyName() dans l'exemple 1 l'affecte à la portée globale , ce qui donne "John" au lieu de "Tom" comme prévu.

Le besoin de Bind()

Lors de la délégation des exécutions de fonctions à un autre code, la référence this peut devenir imprévisible. bind() vous permet de définir manuellement la valeur this avant d'appeler la fonction.

Dans l'exemple 2, appeler storeMyName2() à l'aide de bind(myName) garantit que cette valeur est définie sur l'objet myName, résolvant ainsi le problème. dans l'exemple 1.

Exemple 3 et liaison vs. Invocation

l'exemple 3 utilise myName.getName() sans liaison, mais renvoie toujours la valeur correcte car elle est définie de manière appropriée lorsque getName() la fonction est exécutée. Cela contraste avec l'exemple 1/2 où les fonctions sont stockées sans être exécutées.

Différences clés

Approach	Time of Invocation	Time of this Binding
Function Object	Future	Future
Function Call	Now	Now
f.bind()	Future	Now

Conclusion

bind() est essentiel en JavaScript lorsque vous devez contrôler la valeur this d'une fonction qui sera exécutée dans un contexte différent. En utilisant bind(), vous pouvez éviter un comportement inattendu et vous assurer que cette référence est définie comme vous le souhaitez.

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!