js call () et apply() vs bind()?

Question

Je sais déjà que apply et call sont des fonctions similaires qui définit this (dans un contexte de fonction).

La différence est : comment pouvons-nous envoyer les arguments (manuel vs array)

Mais quand dois-je utiliser l' bind() méthode ?

   var obj = {
      x: 81,
      getX: function() { return this.x; }
    };



    alert(obj.getX.bind(obj)());
    alert(obj.getX.call(obj));
    alert(obj.getX.apply(obj));

jsbin

Answer 1

Lorsque vous souhaitez que la fonction appelé plus tard avec un certain contexte, utile dans les événements.

Appel/s'appliquent appelez la fonction immédiatement, tandis que d' bind retourne une fonction qui, quand plus tard exécuté aura le bon cadre pour l'appel de la fonction d'origine. De cette façon, vous pouvez maintenir le contexte dans async les rappels et les événements.

Je le fais beaucoup de choses:

function MyObject(element) {
    this.elm = element;

    element.addEventListener('click', this.onClick.bind(this), false);
};

MyObject.prototype.onClick = function(e) {
     var t=this;  //do something with [t]...
    //without bind the context of this function wouldn't be a MyObject
    //instance as you would normally expect.
};

Je l'utilise largement dans node.js pour async rappels que je veux passer d'un membre de la méthode, mais veut tout de même le contexte de l'instance qui a commencé l'action asynchrone.

Un simple, naïf mise en œuvre de lier serait:

Function.prototype.bind = function(ctx) {
    var fn = this;
    return function() {
        fn.apply(ctx, arguments);
    };
};

Il s'agit de plus (comme passer d'autres arguments), mais vous pouvez en lire plus à ce sujet et de voir la mise en œuvre réelle sur le MDN.

Espérons que cette aide.

Answer 2

Il permet de définir la valeur de this indépendant de la manière dont la fonction est appelée. Ceci est très utile lorsque vous travaillez avec des rappels:

  function sayHello(){
    alert(this.message);
  }

  var obj = {
     message : "hello"
  };
  setTimeout(sayHello.bind(obj), 1000);

Pour obtenir le même résultat avec call ressemblerait à ceci:

  function sayHello(){
    alert(this.message);
  }

  var obj = {
     message : "hello"
  };
  setTimeout(function(){sayHello.call(obj)}, 1000);