Javascript obtient une référence à l'objet / classe parent à partir du gestionnaire d'événement

J'ai une classe (ou la fonction de l'objet contenant; j'ai entendu dire qu'il n'y a pas une telle chose comme une classe Javascript) appelé Foo, avec un gestionnaire d'événement qui est attaché à un événement de clic. Lorsque le gestionnaire d'événement est appelé, je veux modifier une propriété de ma classe Foo. Normalement, je voudrais utiliser le this mot-clé, mais dans le gestionnaire d'événements, la this de référence est défini à la référence à l'élément html. Voici mon code:

function Foo() {

    this.num=0;
    $('element').click(this.eventHandler);//jQuery to attach an onclick event to my element.

    this.eventHandler=function() {
        this.num++;//This doesn't work.
        //Normally, "this" would refer to my instance of Foo,
        //but as an event handler, "this" refers to the html element.
    }
}

Donc ma question est: comment puis-je obtenir une référence à mon instance de Foo dans mon gestionnaire d'événement afin que je puisse modifier ses propriétés (comme num)?

source d'informationauteur Joel

  1. 13
    function Foo() {
    var _self = this;
    this.num=0;

    $('element').click(this.eventHandler);//jQuery to attach an onclick event to my element.

    this.eventHandler=function() {
        _self.num++;
    }
}

    utiliser une référence _self = this définies à l'extérieur de la portée

  2. 13

    Vous avez besoin de lier la fonction du contexte; sinon this sera l'objet global:

    $('element').click($.proxy(this.eventHandler, this));

    Dans un navigateur moderne, vous pouvez également utiliser Function.prototype.bind:

    $('element').click(this.eventHandler.bind(this))
  3. 2
    function Foo() {
   this.num=0;
   $(document).on('click', 'element', this, this.eventHandler);
   this.eventHandler=function(e) {
      var _this = e.data; 
      _this.num++;
   }
}

    1) Utiliser JQuery() méthode pour fixer les écouteurs d'événement.
    2) Utiliser une référence _ce pour accéder aux parents de la classe.

  4. 1

    Vous pouvez stocker une référence à this dans le constructeur que vous pouvez accéder à votre gestionnaire d'événement.

    function Foo() {

    this.num=0;
    $('element').click(this.eventHandler);//jQuery to attach an onclick event to my element.

    var that = this;
    this.eventHandler=function() {
        that.num++;//This doesn't work.
    }
}