jQuery.proxy()

24
посл. ред. 27.12.2016

Функция jQuery.proxy() из переданной функции создаёт такую же, но с новым значением переменной this. Внутри этой функции переменная this всегда будет иметь конкретное значение (заданный объект), независимо от контекста вызова. Это особенно полезно во время установки обработчиков событий на элементы страницы. К тому же, для удаления обработчика, полученного с помощью jQuery.proxy(), можно указать или саму эту функцию, или её оригинал.

Функция jQuery.proxy() позволяет указать аргументы, которые будут переданы в новую функцию во время запуска. Запустить функцию с определёнными аргументами можно и без изменения this. Для этого в качестве контекста вызова необходимо указать значение null или undefined.

Варианты использования

jQuery.proxy(функция, контекст[, аргумент_1][, аргумент_2]...) => Function
Возвращает копию любой переданной функции с заданным значением переменной this. Объект, в контексте которого будет запускаться функция, передаётся вторым аргументом. Аргументы для передачи в новую функцию указываются отдельными параметрами.
jQuery.proxy(контекст, имя_метода[, аргумент_1][, аргумент_2]...) => Function
Возвращает копию указанного метода переданного первым аргументом объекта с постоянным значением переменной this. Возвращённая функция всегда будет запускаться в контексте объекта, методом которого является. Аргументы для передачи в новую функцию указываются отдельными параметрами.

Примеры

<html>
<head>
  <title>Функции библиотеки jQuery</title>
  <script type="text/javascript" src="js/jquery.js"></script>
</head>
<body>
  <p>Параграф</p>
  <button class="button_1">Кнопка 1</button>
  <button class="button_2">Кнопка 2</button>
</body>
</html>

<script>
function selfRead() {
  alert(this.textContent);
}

var par = document.body.firstElementChild;

$('.button_1').click(selfRead); /* 'Кнопка 1', selfRead запускается в контексте элемента .button_1 */
$('.button_2').click($.proxy(selfRead, par)); /* 'Параграф', selfRead запускается в контексте элемента par */
</script>

Параграф

<html>
<head>
  <title>Функции библиотеки jQuery</title>
  <script type="text/javascript" src="js/jquery.js"></script>
</head>
<body>
  <button class="button_1">Кнопка 1</button>
  <button class="button_2">Кнопка 2</button>
</body>
</html>

<script>
var obj = {
  name: 'Иван',
  showName: function() {
    alert(this.name);
  }
};

$('.button_1').click(obj.showName); /* '', showName запускается в контексте элемента .button_1 */
$('.button_2').click($.proxy(obj, 'showName')); /* 'Иван', showName запускается в контексте объекта obj */
</script>