Javascript Verweis auf Eltern Objekt/Klasse aus Ereignishandler

Question

Ich habe eine Klasse (oder Funktion enthält Objekt; ich habe gehört, dass es keine so etwas wie eine Javascript-Klasse) namens Foo, mit einem Event-Handler, der angefügt ist zu einem Klick-Event. Wenn der Event-Handler aufgerufen wird, möchte ich eine Eigenschaft meiner Klasse Foo ändern. Normalerweise würde ich das Schlüsselwort this verwenden, aber im Ereignishandler wird der Verweis this auf den Verweis auf das HTML-Element gesetzt. Hier ist mein 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. 
    } 
} 

Also meine Frage ist: Wie kann ich einen Verweis auf meine Instanz von Foo in meinen Ereignishandler bekommen, so dass ich seine Eigenschaften ändern kann (wie num)?

Answer 1

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++; 
    } 
} 

Verwendung eine Referenz _self = this im äußeren Umfang definiert

Answer 2

Sie einen Verweis auf this im Konstruktor speichern kann, die Sie in Ihren Event-Handler zugreifen können.

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. 
    } 
} 

Answer 3

Sie müssen den Kontext der Funktion binden; sonst this wird das globale Objekt sein:

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

In einem modernen Browser auch Sie Function.prototype.bind verwenden können:

$('element').click(this.eventHandler.bind(this)) 

Answer 4

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

1) Verwenden Sie JQuery on() Methode Ereignis-Listener zu befestigen. 2) Verwenden Sie eine Referenz _this für den Zugriff auf die Elternklasse.