Verwendung von jQuery.proxy ()

Ich habe die API gelesen jQuery.proxy(). Es sieht vielversprechend aus, aber ich habe mich gefragt, in welcher Situation diese Verwendung am besten ist. Kann mich jemand aufklären?

When you want a function that has the this value bound to a specific object. For example, in callbacks such as event handlers, AJAX callbacks, timeouts, intervals, custom objects, etc.

Dies ist nur ein Beispiel für eine Situation, in der dies nützlich sein könnte. Vorausgesetzt, es gibt einePerson object which has a property name. It is also linked to a text input element, and whenever the input value changes, the name in this person object gets updated too.

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 häufig verwendete Lösung besteht darin, diesen Kontext in einer Variablen zu speichern und diese in der Rückruffunktion zu verwenden, z.

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 hätten wir jQuery.proxyhier auch den Verweis thisauf das Objekt der Person anstelle des Elements verwenden können, 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, das jetzt das enthält bind entliehene Methodeprototypejs und ist in einigen Browsern bereits 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
}

Dies ist nur eine Kurzmethode zum Festlegen des Kontexts für einen Abschluss, zum Beispiel:

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

Wie oft wir auch thisbleiben wollen , wir wollen die Methode bleiben, für die wir verwendet wurden $.proxy():

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

Es wird normalerweise für verspätete Anrufe oder überall dort verwendet, wo Sie keine Langstreckenmethode zum Deklarieren einer Schließung durchführen möchten. Die Zeichenfolgenmethode zum Verweisen des Kontexts auf ein Objekt ... Nun, ich habe noch keine praktische Verwendung im täglichen Code gefunden, aber ich bin sicher, dass es Anwendungen gibt, hängt nur davon ab, wie Ihre Objekt- / Ereignisstruktur aussieht.

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

var that = this;

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

du kannst tun:

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

Oder wenn Sie ein Plugin erstellen, das Rückrufe akzeptiert und einen bestimmten Kontext für den Rückruf festlegen müssen.