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

Question

Le problème dans l'exemple 1 est "présent", en référence à la dénomination globale au lieu de la myName objet.

Je comprends l'utilisation de bind() dans l'établissement de la valeur de ce à un objet spécifique, de sorte qu'il résout le problème dans l'exemple 1, mais pourquoi ce problème se produit en premier lieu? Est-ce juste la façon Javascript a été créé?

Je me demande aussi pourquoi l'exemple 3 résout le problème et la différence entre l'exemple 2 et 3.

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

console.log("example 1: " + storeMyName()); // doesn't work
console.log("example 2: " + storeMyName2()); // works
console.log("example 3: " + storeMyName3); // works

Answer 1

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

La valeur de this est déterminé par la façon dont une fonction est appelée. Si c'est vous qui appelle la fonction alors il n'est généralement pas nécessaire d'utiliser .bind, puisque vous avez le contrôle sur comment appeler la fonction, et donc son this de la valeur.

Cependant, souvent, c'est pas vous qui appelle la fonction. Les fonctions sont transmises à d'autres fonctions comme des rappels et des gestionnaires d'événements. Ils sont appelés par d'autres code et vous n'avez aucun contrôle sur la façon dont la fonction est appelée, et, par conséquent, ne peut pas contrôler ce qu' this va consulter.

Si votre fonction exige this être réglé à une valeur spécifique et vous n'êtes pas le seul appel de la fonction, vous avez besoin d' .bind la fonction spécifique de la this de la valeur.

En d'autres termes: .bind vous permet de définir la valeur de this sans appel de la fonction maintenant.

Ici est la comparaison de la référence à/fonctions d'appel:

                    +-------------------+-------------------+
                    |                   |                   |
                    |      time of      |       time of     |
                    |function execution |    this binding   |
                    |                   |                   |
+-------------------+-------------------+-------------------+
|                   |                   |                   |
|  function object  |      future       |      future       |
|         f         |                   |                   |
|                   |                   |                   |
+-------------------+-------------------+-------------------+
|                   |                   |                   |
|   function call   |       now         |        now        |
|        f()        |                   |                   |
|                   |                   |                   |
+-------------------+-------------------+-------------------+
|                   |                   |                   |
|     f.call()      |       now         |        now        |
|     f.apply()     |                   |                   |
|                   |                   |                   |
+-------------------+-------------------+-------------------+
|                   |                   |                   |
|     f.bind()      |      future       |        now        |
|                   |                   |                   |
+-------------------+-------------------+-------------------+

Je me demande aussi pourquoi l'exemple 3 résout le problème et la différence entre l'exemple 2 et 3.

Exemple 1/2 et 3 ne pouvait pas être plus différent. storeMyName et storeMyName2 contiennent des fonctions, qui sont appelés dans l'avenir, alors que storeMyName3 contient le résultat de l'appel d' myName.getName() à ce moment.

---

Autres matériels de lecture:

• Comment le mot clé "this" de travail?
• MDN - ce
• YDKS - ce & Prototypes d'Objets
• Comment accéder à la corriger " ce " contexte à l'intérieur d'un rappel?

Answer 2

L' bind() méthode crée une nouvelle fonction qui, lorsqu'on l'appelle, a son cet ensemble de mots-clés à la valeur fournie, avec une séquence donnée d'arguments précédents fournie lorsque la fonction est appelée.

Donc, lorsque vous exécutez var storeMyName = myName.getName; la première fois, il prend le global name ( ce.nom = "Jean" )

Lorsque vous utilisez bind() de la fonction, il commence en se référant au nom défini dans le courant de fermeture ( myName dans ce cas ), et donc des tirages Tom

Troisième temps, puisque la fonction est appelée tout de suite son champ d'application est à l'intérieur de son propre objet et donc imprime la valeur de la fermeture de l' Tom

Answer 3

Bind est le mécanisme par lequel vous pouvez modifier le contexte(ici par défaut de votre contexte global) de l'exécution.

Basé sur votre exemple -

var storeMyName = myName.getName;

De ligne ci-dessus est l'exécution d' storeMyName de la fonction dans un contexte global, donc, pour cette exécution this.name sera de première ligne(c'est à dire globale / "John").

var storeMyName2 = myName.getName.bind(myName);

Pour la ligne ci-dessus vous sont Explicitement changer le contexte d'exécution pour l' storeMyName2 de la fonction(en disant que je ne veux pas l'exécution de cette fonction comme la fonction globale, je veux l'exécution de cette fonction dans le contexte de l' myName objet, dans ce cas - this.name sera "Tom")

var storeMyName3 = myName.getName(); // example 3

Et pour cela, au-dessus de la ligne que vous êtes juste à l'exécution de la fonction myName contexte de l'objet, plus important encore, vous n'êtes pas l'exécution de l' storeMyName3 et c'est pourquoi son contexte n'est pas global.

Answer 4

Une analogie que j'aime, que je n'ai jamais vu n'importe où: Disons que vous avez un objet foo avec un barfonction. Lorsque vous êtes à la liaison de la barre de fonction à une autre variable (ou le passant comme paramètre d'une fonction, qui n'est plus le cas avec les callbacks), vous ne sont pas obligatoires et la transmission de la fonction avec son englobante de l'objet, mais seulement la "nude" de la fonction. Donc avec le "nude" de la fonction, this signifie que l'objet global.

Une petite démo

var foo = "global foo"; //foo set on the global object
var a = {foo : "object foo", bar : function(){return this.foo;}};
var bound = a.bar;
console.log(bound());//returns "global foo", not "object foo"

bound il suffit de pointer à l' function(){return this.foo;}