Использование jQuery.proxy()

Question

Я читал API о jQuery.proxy(), Это выглядит многообещающе, но мне было интересно, в какой ситуации это лучшее использование. Кто-нибудь может просветить меня?

Answer 1

Когда вы хотите функцию, которая имеет this значение привязано к конкретному объекту. Например, в обратных вызовах, таких как обработчики событий, обратные вызовы AJAX, тайм-ауты, интервалы, пользовательские объекты и т. Д.

Это просто сфабрикованный пример ситуации, когда это может быть полезно. Предполагая, что есть Person объект, который имеет имя свойства. Он также связан с элементом ввода текста, и всякий раз, когда изменяется значение ввода, имя в этом объекте person также обновляется.

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

Одно из решений, которое мы часто используем, - это сохранить контекст this в переменной и использовать его внутри функции обратного вызова, такой как:

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

В качестве альтернативы, мы могли бы использовать jQuery.proxy вот так ссылка на this ссылается на объект Person вместо элемента, который вызвал событие.

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

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

Обратите внимание, что эта функция была стандартизирована в ECMAScript 5, который теперь включает bind Метод заимствован у prototypejs и уже доступен в некоторых браузерах.

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

Это просто сокращенный метод установки контекста для замыкания, например:

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

Как часто мы хотим this оставаться таким же, как метод, в котором мы были, который $.proxy() используется для, как это:

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

Обычно он используется для отложенных вызовов или в тех случаях, когда вы не хотите делать длинный метод объявления закрытия. Строковый метод указания контекста на объект... ну, я пока не сталкивался с практическим использованием кода на каждый день, но я уверен, что есть приложения, зависит только от того, какова структура вашего объекта / события.

Answer 3

Например, если вы хотите создать обратные вызовы. Вместо:

var that = this;

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

ты можешь сделать:

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

Или, если вы создаете плагин, который принимает обратные вызовы, и вы должны установить конкретный контекст для обратного вызова.