Utilisation de jQuery.proxy ()

Question

Je lisais l’API à propos de jQuery.proxy() . Cela semble prometteur, mais je me demandais dans quelle situation cette utilisation était la meilleure. Quelqu'un peut-il m'éclairer? Merci.

Answer 1

Quand vous voulez une fonction qui a l' this de la valeur liée à un objet spécifique. Par exemple, dans les rappels comme les gestionnaires d'événements, rappels AJAX, les délais d'attente, des intervalles, des objets personnalisés, etc.

C'est juste un fabriqué exemple d'une situation où il pourrait être utile. En supposant qu'il existe un Person objet qui a un nom de propriété. Il est également lié à un texte de l'élément d'entrée, et à chaque fois que la valeur d'entrée des changements, le nom de cette personne, de l'objet est mise à jour aussi.

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.
    });
}

Une solution que nous utilisons souvent, est de stocker les ce contexte dans une variable et utiliser qu'à l'intérieur de la fonction de rappel tels que:

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
    });
}

Sinon, nous aurions pu utiliser jQuery.proxy ici donc, la référence à l' this fait référence à l'objet de la Personne au lieu de l'élément qui a déclenché l'événement.

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

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

Notez que cette fonctionnalité a été normalisé en ECMAScript 5, qui comprend désormais l' bind méthode empruntée Prototype et est déjà disponible sur certains navigateurs.

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

C'est juste une méthode abrégée de définir le contexte de la fermeture, par exemple:

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

Cependant, souvent, nous voulons this de restent les mêmes que pour la méthode, nous avons été en, $.proxy() est utilisé pour, comme ceci:

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

Il est généralement utilisé pour le retard des appels, ou partout où vous ne voulez pas faire un longhand méthode de déclaration d'une fermeture. La méthode de chaîne de pointer le contexte d'un objet...bien, je n'ai pas rencontré une utilisation pratique quotidienne de code, mais je suis sûr qu'il ya des applications, tout dépend de ce que votre objet/événement de la structure.

Answer 3

Par exemple, si vous souhaitez créer des rappels. Au lieu de:

 var that = this;

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

tu peux faire:

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

Ou si vous créez un plugin qui accepte les rappels et que vous devez définir un contexte spécifique pour le rappel.