jQuery.proxy() Verwendung

Question

Ich lese die API über jQuery.proxy(). Es sieht vielversprechend aus, aber ich frage mich, in welcher Situation dies am besten ist. Kann mich jemand aufklären?

Answer 1

Wenn Sie eine Funktion wünschen, die den Wert this an ein bestimmtes Objekt gebunden hat. Zum Beispiel in Rückrufen wie Event-Handlern, AJAX-Rückrufen, Timeouts, Intervallen, benutzerdefinierten Objekten usw.

Dies ist nur ein Beispiel für eine Situation, in der es nützlich sein könnte. Angenommen, es gibt ein Person Objekt, das einen Eigenschaftsnamen hat. Es ist auch mit einem Texteingabeelement verknüpft, und wenn sich der Eingabewert ändert, wird auch der Name in diesem Personenobjekt aktualisiert.

function Person(el) { 
    this.name = ''; 

    $(el).change(function(event) { 
     // Want to update this.name of the Person object, 
     // but can't because this here refers to the element 
     // that triggered the change event. 
    }); 
} 

Eine Lösung, die wir häufig verwenden, um die diesen Zusammenhang in einer Variablen zu speichern und diese Funktion innerhalb der Callback verwenden wie:

function Person(el) { 
    this.name = ''; 

    var self = this; // store reference to this 

    $(el).change(function(event) { 
     self.name = this.value; // captures self in a closure 
    }); 
} 

Alternativ könnten wir jQuery.proxy hier so die Referenz verwendet haben to this bezieht sich auf das Objekt Person anstelle des Elements, das das Ereignis ausgelöst hat.

function Person(el) { 
    this.name = ''; 

    $(el).change(jQuery.proxy(function(event) { 
     this.name = event.target.value; 
    }, this)); 
} 

Beachten Sie, dass diese Funktion in ECMAScript 5 standardisiert wurde, die nun die von prototypejs entlehnt bind Verfahren beinhaltet und ist bereits auf einigen Browsern verfügbar.

function Person(el) { 
    this.name = ''; 

    $(el).change(function(event) { 
     this.name = event.target.value; 
    }.bind(this)); // we're binding the function to the object of person 
} 

Answer 2

Zum Beispiel, wenn Sie Rückrufe erstellen möchten. Statt:

var that = this; 

$('button').click(function() { 
    that.someMethod(); 
}); 

können Sie tun:

$('button').click($.proxy(this.someMethod, this)); 

Oder wenn Sie ein Plugin erstellen, die Rückrufe akzeptiert und Sie müssen einen spezifischen Kontext für den Rückruf eingestellt.

Answer 3

Es ist nur ein verkürztes Verfahren den Kontext für eine Schließung Einstellung, zum Beispiel:

$(".myClass").click(function() { 
    setTimeout(function() { 
    alert(this); //window 
    }, 1000); 
}); 

jedoch oft wollen wir this das gleiche wie das Verfahren zu bleiben, in der wir waren, die $.proxy() für verwendet wird, wie dies:

$("button").click(function() { 
    setTimeout($.proxy(function() { 
    alert(this); //button 
    }, this), 1000); 
});​ 

Es ist in der Regel für die verzögerte Anrufe verwendet wird, oder wo immer Sie wollen keine Langschrift Verfahren zur Vereinbarkeit eines Verschlusses zu tun. Die String-Methode, um den Kontext auf ein Objekt zu verweisen ... nun, ich bin noch nicht auf eine praktische Verwendung im alltäglichen Code gestoßen, aber ich bin sicher, dass es Anwendungen gibt, hängt nur davon ab, was Ihre Objekt-/Event-Struktur ist.