Steuern des Werts von 'this' in einem jQuery-Ereignis

Ich habe mit jQuery ein 'Steuerelement' erstellt und jQuery.extend verwendet, um es so OO wie möglich zu machen.

Während der Initialisierung meiner Steuerung verkabele ich verschiedene Klickereignisse wie diese

jQuery('#available input', 
            this.controlDiv).bind('click', this, this.availableCategoryClick);

Beachten Sie, dass ich 'this' als Datenargument in der bind-Methode verwende. Ich mache das, damit ich auf Daten zugreifen kann, die an die Steuerinstanz angehängt sind, und nicht auf das Element, das das Klickereignis auslöst.

Das funktioniert perfekt, aber ich vermute, es gibt einen besseren Weg

Nachdem ich in der Vergangenheit Prototype verwendet habe, erinnere ich mich an eine Bindungssyntax, mit der Sie steuern konnten, wie hoch der Wert von 'this' im Ereignis war.

Was ist der jQuery-Weg?

Sie können jQuery.proxy()mit anonymen Funktionen verwenden, nur ein wenig umständlich, dass "Kontext" der zweite Parameter ist.

 $("#button").click($.proxy(function () {
     //use original 'this'
 },this));

Ich mag deinen Weg, benutze tatsächlich eine ähnliche Konstruktion:

$('#available_input').bind('click', {self:this}, this.onClick);

und die erste Zeile von this.onClick:

var self = event.data.self;

Ich mag diesen Weg, weil dann sowohl das angeklickte Element (als dies) als auch das "this" -Objekt als Selbst angezeigt werden, ohne dass Verschlüsse verwendet werden müssen.

jQuery hat die jQuery.proxyMethode (verfügbar seit 1.4).

Beispiel:

var Foo = {
  name: "foo",

  test: function() {
    alert(this.name)
  }
}

$("#test").click($.proxy(Foo.test, Foo))
// "foo" alerted

Ich glaube nicht, dass jQuery eine integrierte Funktion dafür hat. Sie können jedoch ein Hilfskonstrukt wie das folgende verwenden:

Function.prototype.createDelegate = function(scope) {
    var fn = this;
    return function() {
        // Forward to the original function using 'scope' as 'this'.
        return fn.apply(scope, arguments);
    }
}

// Then:
$(...).bind(..., obj.method.createDelegate(obj));

Auf diese Weise können Sie mit createDelegate () dynamische 'Wrapper-Funktionen' erstellen, die die Methode mit einem bestimmten Objekt als 'this'-Bereich aufrufen.

Beispiel:

function foo() {
    alert(this);
}

var myfoo = foo.createDelegate("foobar");
myfoo(); // calls foo() with this = "foobar"

HTML 5-kompatible Browser bieten eine Bindemethode, bei Function.prototypeder es sich wahrscheinlich um die sauberste Syntax handelt und die nicht vom Framework abhängig ist, obwohl sie erst in IE 9 in den IE integriert wird. (Es gibt jedoch eine Polyfüllung für Browser ohne diese.)

Anhand Ihres Beispiels können Sie es folgendermaßen verwenden:

jQuery('#available input', 
        this.controlDiv).bind('click', this.availableCategoryClick.bind(this));

(Randnotiz: Die erste bindin dieser Anweisung ist Teil von jQuery und hat nichts damit zu tun. Function.prototype.bind)

Oder um etwas prägnanteres und aktuelleres jQuery zu verwenden (und Verwirrung durch zwei verschiedene Arten von binds zu vermeiden):

$('#available input', this.controlDiv).click(this.availableCategoryClick.bind(this));

Sie können die Javascript- Bindemethode wie folgt verwenden:

var coolFunction = function(){
  // here whatever involving this
     alert(this.coolValue);
}

var object = {coolValue: "bla"};


$("#bla").bind('click', coolFunction.bind(object));

jQuery unterstützt keine Bindungen und die bevorzugte Methode ist die Verwendung von Funktionen.

Da in Javascript this.availableCategoryClick nicht bedeutet, dass die Funktion availableCategoryClick für dieses Objekt aufgerufen wird, empfiehlt jQuery, diese bevorzugte Syntax zu verwenden:

var self = this;
jQuery('#available input', self.controlDiv).bind('click', function(event)
{
   self.availableCategoryClick(event);
});

OO-Konzepte in Javascript sind schwer zu verstehen, funktionale Programmierung ist oft einfacher und besser lesbar.

Wenn man sieht, dass Funktionen den Umfang ändern, ist es am gebräuchlichsten, dies von Hand mit so etwas zu tun var self = this.

var self = this

$('.some_selector').each(function(){
  // refer to 'self' here
}