JavaScript Rappels et `this`


Exemple

Souvent, lorsque vous utilisez un rappel, vous souhaitez accéder à un contexte spécifique.

function SomeClass(msg, elem) {
  this.msg = msg;
  elem.addEventListener('click', function() {
    console.log(this.msg);  // <= will fail because "this" is undefined
  });
}

var s = new SomeClass("hello", someElement);

Solutions

  • Utiliser bind

    bind génère effectivement une nouvelle fonction qui définit this qui a été transmis à bind puis appelle la fonction d'origine.

      function SomeClass(msg, elem) {
        this.msg = msg;
        elem.addEventListener('click', function() {
          console.log(this.msg);  
        }.bind(this));  // <=-  bind the function to `this`
      }
    
  • Utilisez les fonctions de flèche

    Fonctions Arrow lient automatiquement le courant this contexte.

      function SomeClass(msg, elem) {
        this.msg = msg;
        elem.addEventListener('click',() => {   // <=-  arrow function binds `this`
          console.log(this.msg);  
        });
      }
    

Vous souhaitez souvent appeler une fonction membre en transmettant idéalement tous les arguments passés à l'événement dans la fonction.

Solutions:

  • Utiliser bind

      function SomeClass(msg, elem) {
        this.msg = msg;
        elem.addEventListener('click', this.handleClick.bind(this));
      }
    
      SomeClass.prototype.handleClick = function(event) {
        console.log(event.type, this.msg);
      };
    
  • Utilisez les fonctions de flèche et l'opérateur de repos

      function SomeClass(msg, elem) {
        this.msg = msg;
        elem.addEventListener('click', (...a) => this.handleClick(...a));
      }
    
      SomeClass.prototype.handleClick = function(event) {
        console.log(event.type, this.msg);
      };
    
  • Pour les écouteurs d'événement DOM en particulier, vous pouvez implémenter l' interface EventListener

      function SomeClass(msg, elem) {
        this.msg = msg;
        elem.addEventListener('click', this);
      }
    
      SomeClass.prototype.handleEvent = function(event) {
        var fn = this[event.type];
        if (fn) {
           fn.apply(this, arguments);
        }
      };
      
      SomeClass.prototype.click = function(event) {
        console.log(this.msg);
      };