La méthode Bind de JavaScript

Un usage limité mais utile à connaître pour éviter des erreurs dans les callbacks.

Bind s'utilise essentiellement en conjonction avec un callback, et plus précisément quand le callback fait appel à "this". Hors de ce cas de figure, c'est tout sauf indispensable... Cependant, vous risquez de rencontrer la méthode bind dans des codes tiers, il est donc utile de savoir à quoi cela sert exactement.

Prenons un exemple. Ce script retourne le nom d'un langage quand on lui donne un code de deux lettres. On simplifie la démonstration avec deux langages seulement...

var languages =  {
  a: function () {
    return "English";
  },

  b: function () {
    return "Français";
  },

  whatLang : function (x) {
    if(x == "en")
      return this.a();
    else
      return this.b();	
  }
}
document.write(languages.whatLang("en"));

Il doit afficher "English" quand le paramètre est "en" ou "Français" quand il est "fr".

Utiliser un callback

On décide maintenant de placer dans un callback la fonction qui associe le code de deux lettres au nom du langage.

var languages =  {
  a: function () {
    return "English";
  },
	
  b: function () {
    return "Français";
  },
  
  whatLang : function (cback) {
    cback();
  },
	
  sel : function (x) {
    var l;
    this.whatLang(function() {
      if(x == "en")
        l = this.a();
      else
        l = this.b();
    });
    return l;	
  }
}
document.write(languages.sel("en"));

Aucun résultat affiché et vous pouver voir dans la console du navigateur le message d'erreur "this.a is not a function".
La raison est que le callback crée un nouveau contexte et le this du callback n'est pas le this de la fonction principale.
Pour remédier à cela, on ajoute la méthode bind à la fonction dans laquelle le nouveau this est utilisé.

Ajouter bind

var languages =  {
  a: function () {
    return "English";
  },
	
  b: function () {
    return "Français";
  },
  
  whatLang : function (cback) {
    cback();
  },
	
  sel : function (x) {
    var l;
    this.whatLang(function() {
      if(x == "en")
        l = this.a();
      else
        l = this.b();
    }.bind(this));
    return l;	
  }
}
document.write(languages.sel("en"));

Cette fois fois le nom du langage est bien trouvé parce que bind remplace this dans la fonction par celui qui est donné en paramètre et celui-ci est le this de la fonction principale.

Une autre solution serait d'assigner this dans la fonction sel à une variable et d'utiliser cette variable à la place de this dans la fonction donnée en paramètre:

sel : function (x) {
  var l;
  var mainThis = this;
  this.whatLang(function() {
    if(x == "en")
      l = mainThis.a();
    else
      l = mainThis.b();
  });
 return l;	
}

Cette solution est aussi valide et peut-être même plus facile à lire. Bind peut aussi s'utiliser avec d'autres paramètres que this, cela permet de transmettre des variables d'un contexte à un autre sans utiliser des variables globales, ce qui est plus sûr.