Wie übergebe ich diesen Kontext in einen Event-Handler?

Ich weiß, diese Frage macht nicht viel Sinn, aber lassen Sie mich versuchen zu klären, ein bisschen.

Habe ich eine Klasse, genannt ScrollBanner, und es sieht etwas wie folgt aus (eine Menge, der Kürze halber weggelassen):

function ScrollBanner() {
    this.initialize = function(selector) {
        $('span#banner1-nav').click(this._onClickNavigation);
    }

    this._onClickNavigation = function(event) {
        this.restartTimer(); //this == span#banner1-nav element from this.initialize
        //...
    }

    this.restartTimer() {
        //...
    }
}

Wie Sie sehen können .initialisieren setzt einen click-handler zu ._onClickNavigation. Einige erwarten, dass die diese im event-handler zu finden, um die ScrollBanner Beispiel, aber leider tut es das nicht. Es bezieht sich auf das element, das trigerred das click-Ereignis, in diesem Fall span#banner1-nav

Was wäre der beste Weg, um diese verweisen auf die ScrollBanner Instanz der Klasse?

InformationsquelleAutor der Frage josef.van.niekerk | 2011-03-30

  1. 74

    Die alten/traditionellen Weg:

    Erfassen this in eine variable:

    this.initialize = function(selector) {
    var that = this;
    $('span#banner1-nav').click(function(event) {
       that._onClickNavigation(event);
    });
}

    Konnte Sie auch zuordnen this eine variable z.B. instance:

    function ScrollBanner() {
    var instance = this;
    //...
}

    und beziehen sich auf instance statt this in aller Anrufe.

    Die Allgemeine Idee ist, um zu speichern this in eine variable in einem höheren Bereich.

    Den ECMAScript5 Weg:

    ECMAScript5 führt eine neue Eigenschaft von Funktionen: .bind(). MDC-Dokumentation zeigt eine Umsetzung für Browser, die dies nicht unterstützen. Mit ihm können Sie binden einen bestimmten Kontext eine Funktion:

    this.initialize = function(selector) {
    $('span#banner1-nav').click(this._onClickNavigation.bind(this));
}

    aber hinter den kulissen ist es die gleiche Sache zu tun. Der Vorteil ist, dass Sie machen verwenden von built-in-Funktionalität in browser-Unterstützung ist.

    Beachten Sie, dass dies unterscheidet sich von apply oder call. Beide setzen den Rahmen und ausführen der Funktion, in der Erwägung, dass bind legt nur den Rahmen, ohne die Ausführung der Funktion.

    Der jQuery-Weg:

    jQuery stellt einen Methode $.proxy(), das gleiche zu tun:

    $('span#banner1-nav').click($.proxy(this._onClickNavigation, this));

    InformationsquelleAutor der Antwort Felix Kling

  2. 1

    Ich weiß, das ist eine alte Frage, aber ich sah, dass in den Kommentaren, $.proxy() erwähnt wird. Ja, es verändert sich der Kontext eines Objekts, aber nicht in ein jQuery-event.

     $('.selector').click( $.proxy( function() {
     console.log(this); /* this is set to .selector */
 }, this));

    $.proxy() gibt die Funktion in dem Umfang, wie this laut aber dann, die Funktion wird zurückgegeben und von click() welche dann ändert sich der Rahmen zu .selector element.

    Getestet hab ich es vor einer minute aber wenn ich habe es falsch ist, bitte, sagen Sie

    InformationsquelleAutor der Antwort Mario Legenda

Schreibe einen Kommentar