Javascript-Verweis auf parent-Objekt/event-handler-Klasse aus

Habe ich eine Klasse (oder Funktion-mit Objekt; ich habe gehört, dass es keine solche Sache wie eine Javascript-Klasse) Foo aufgerufen, mit einem Ereignis-handler, der angeschlossen ist, um einen click-Ereignis. Wenn der event-handler aufgerufen wird, möchte ich zum ändern einer Eigenschaft meiner Klasse Foo. Normalerweise, würde ich die this Stichwort, aber in der Ereignis-handler, der this Referenz festlegen der Referenz auf das html-element. 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 bekomme ich eine Referenz auf meine Instanz von Foo in meinem event-handler, so dass ich kann Ihre Eigenschaften ändern (wie num)?

InformationsquelleAutor Joel | 2012-05-18

  1. 14
    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++;
    }
}

    Referenz _self = this definiert der äußere Umfang

    Konnte nicht diese Lösung einen Speicherverlust verursachen, wenn das Objekt überhaupt freigegeben werden muß?

    InformationsquelleAutor fcalderan

  2. 13

    Sie zu binden, müssen Sie die Funktion im Kontext; ansonsten this wird das Globale Objekt:

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

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

    $('element').click(this.eventHandler.bind(this))
    Sollte dies wirklich die Antwort akzeptiert. Es ist robuster, da die Schließung ist nicht immer eine option.

    InformationsquelleAutor ThiefMaster

  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) die JQuery () - Methode Anhängen Ereignis-Listener.
    2) Verwenden Sie einen Verweis _diese für den Zugriff auf übergeordnete Klasse.

    InformationsquelleAutor Swapnil Bhamat

  4. 1

    Können Sie speichern eine Referenz auf this im Konstruktor, die Sie bei Ihrem event-handler.

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

    InformationsquelleAutor alex

Schreibe einen Kommentar