Portée De Rappel JavaScript

(extrait d'une explication cachée dans les commentaires dans une autre réponse)

Le problème réside dans la ligne suivante:

this.dom.addEventListener("click", self.onclick, false);

ici, vous passez un objet de fonction à utiliser comme callback. Lorsque l'événement se déclenche, la fonction est appelée mais elle n'a plus d'association avec un objet (ceci).

le problème peut être résolu en enveloppant la fonction (avec sa référence objet) dans un fermeture comme suit:

this.dom.addEventListener(
  "click",
  function(event) {self.onclick(event)},
  false);

puisque la variable self a été assignée cette quand la fermeture a été créée, la fonction de fermeture se souviendra de la valeur de la variable self quand elle est appelée à un moment ultérieur.

une autre façon de résoudre ceci est de faire une fonction d'utilité (et éviter d'utiliser des variables pour lier ce ):

function bind(scope, fn) {
    return function () {
        fn.apply(scope, arguments);
    };
}

le code mis à jour serait alors ressemble à:

this.dom.addEventListener("click", bind(this, this.onclick), false);

Function.prototype.bind fait partie D'ECMAScript 5 et offre la même fonctionnalité. Donc vous pouvez faire:

this.dom.addEventListener("click", this.onclick.bind(this), false);

pour les navigateurs qui ne prennent pas encore en charge ES5, MDN fournit le shim suivant:

if (!Function.prototype.bind) {  
  Function.prototype.bind = function (oThis) {  
    if (typeof this !== "function") {  
      // closest thing possible to the ECMAScript 5 internal IsCallable function  
      throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable");  
    }  

    var aArgs = Array.prototype.slice.call(arguments, 1),   
        fToBind = this,   
        fNOP = function () {},  
        fBound = function () {  
          return fToBind.apply(this instanceof fNOP  
                                 ? this  
                                 : oThis || window,  
                               aArgs.concat(Array.prototype.slice.call(arguments)));  
        };  

    fNOP.prototype = this.prototype;  
    fBound.prototype = new fNOP();  

    return fBound;  
  };  
}