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

Ответ 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.
    });
}

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

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
}

Ответ 2

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

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

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

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

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

Ответ 3

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

var that = this;

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

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

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

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