jQuery.использование прокси()

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

3 67
javascript jquery

3 ответа:

когда вы хотите функцию, которая имеет 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 относится к объекту человека вместо элемента, который вызвал событие.

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
}
134

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

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

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

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

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

17

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

var that = this;

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

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

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

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

14