Den Wert von 'this' in einem jQuery-Ereignis steuern

Question

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

Während der Initialisierung meiner Kontrolle ich verschiedene Klick-Ereignisse wie so

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

Beachten Sie, dass ich pasing ‚this‘ als Daten Argument in der Methode bind verdrahten. Ich tue dies so, dass ich an Daten, die an die Steuerungsinstanz angehängt sind, eher von dem Element, das das Klickereignis auslöst, zugreifen kann.

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

verwendet Prototype in der Vergangenheit, ich bind Syntax erinnern, die Sie steuern dürfen, was den Wert von ‚this‘ in dem Fall war.

Was ist der jQuery Weg?

Answer 1

Sie können jQuery.proxy() mit anonymer Funktion, verwenden Sie nur ein wenig umständlich, dass ‚Kontext‘ ist der zweite Parameter.

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

Answer 2

Ich glaube nicht, dass jQuery eine eingebaute Funktion dafür hat. Aber man könnte ein Helferkonstrukt wie folgt verwendet werden:

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 erstellen dynamische ‚Wrapper-Funktionen‘ mit CreateDelegate(), die das Verfahren mit einem bestimmten Objekt als ‚this‘ Anwendungsbereich nennen.

Beispiel:

function foo() { 
    alert(this); 
} 

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

Answer 3

jQuery unterstützt nicht bindet und die bevorzugte Art und Weise ist es, Funktionen zu verwenden.

Weil in Javascript, this.availableCategoryClick bedeutet nicht, auf dieses Objekt die availableCategoryClick Funktion aufrufen, raten jQuery diese bevorzugte Syntax:

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

OO-Konzepte in Javascript sind schwer zu verstehen, functionnal Programmierung ist oft einfacher und lesbarer.

Answer 4

Wenn man sieht, dass Funktionen den Bereich ändern, ist es am üblichsten, dies von Hand zu tun, etwa mit var self = this.

var self = this 

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

Answer 5

ich dich mag in der Tat verwenden eine ähnliche Konstruktion:

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

und die erste Zeile des this.onClick:

var self = event.data.self; 

ich so mag, weil dann Sie bekommen Sowohl das Element als auch das Objekt "this" klickten als self, ohne dass Closures verwendet werden mussten.

Answer 6

jQuery hat die jQuery.proxy Methode (verfügbar seit 1.4).

Beispiel:

var Foo = { 
    name: "foo", 

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

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

Answer 7

Sie JavaScript bind Methode wie folgt verwenden:

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

var object = {coolValue: "bla"}; 


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

Answer 8

HTML 5-kompatiblen Browser bieten eine bind method auf Function.prototype das ist wahrscheinlich die sauberste Syntax und ist nicht gerüst abhängig, obwohl es ist bis IE 9 nicht in IE integriert. (Es gibt jedoch einen polyfill für Browser ohne.)

Basierend auf Ihrem Beispiel können Sie es wie folgt verwenden:

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

(Seite Anmerkung: die ersten bind in dieser Aussage ist ein Teil von jQuery und hat nichts mit Function.prototype.bind zu tun)

Oder etwas prägnanter zu bedienen und up-to-date jQuery (und beseitigt Verwirrung aus zwei verschiedene Arten von bind e):

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