jQuery.proxy () использование
Я читал API о jQuery.proxy(). Это выглядит многообещающим, но я задавался вопросом в том, какая ситуация является этим лучшим использованием. Кто-либо может просветить меня?
3 ответа
Если вам нужна функция, которая имеет значение this , привязанное к определенному объекту. Например, в обратных вызовах, таких как обработчики событий, обратные вызовы AJAX, тайм-ауты, интервалы, настраиваемые объекты и т. Д.
Это всего лишь искусственный пример ситуации, в которой это может быть полезно. Предположим, что существует объект 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 , чтобы ссылка to 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
}
Это просто сокращенный метод установки контекста для закрытия, например:
$(".myClass").click(function() {
setTimeout(function() {
alert(this); //window
}, 1000);
});
Однако часто мы хотим, чтобы this оставался таким же, как и метод, которым мы пользовались. , для которого используется $. proxy () , например:
$("button").click(function() {
setTimeout($.proxy(function() {
alert(this); //button
}, this), 1000);
});
Обычно он используется для отложенных вызовов или в любом другом месте, где вы не хотите использовать длинный метод объявления закрытия. Строковый метод указания контекста на объект ... ну, я еще не встречал практического использования в повседневном коде, но я уверен, что есть приложения, просто зависит от вашей структуры объекта / события.
Например, если вы хотите создать обратные вызовы. Вместо:
var that = this;
$('button').click(function() {
that.someMethod();
});
вы можете:
$('button').click($.proxy(this.someMethod, this));
Или, если вы создаете плагин, который принимает обратные вызовы, и вы должны установить определенный контекст для обратного вызова.