Перейти к содержанию

jQuery.proxy()

Метод jQuery.proxy() принимает функцию и возвращает новую, которая всегда будет иметь определенный контекст выполнения.

Синтаксис

Синтаксис 1.4:

jQuery.proxy(functionName, context)
jQuery.proxy(context, name)

Синтаксис 1.6:

jQuery.proxy(functionName, context, additionalArguments)
jQuery.proxy(context, name, additionalArguments)

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

Система привязки событий jQuery присваивает уникальный идентификатор каждой функции обработки событий, чтобы отслеживать ее, когда она используется для указания функции, которая должна быть отключена. Функция, представленная jQuery.proxy(), рассматривается как одна функция системой событий, даже если она используется для привязки разных контекстов. Чтобы избежать отключения не тех обработчиков, используйте уникальное пространство имен событий для привязки и отключения (например, click.myProxyNamespace), вместо указания прокси-функции во время отключения.

Начиная с версии jQuery 1.6, любое количество дополнительных аргументов может быть предоставлено методу jQuery.proxy() и они будут переданы функции, контекст которой будет изменен.

Начиная с версии jQuery 1.9, когда аргумент context равен null или undefined, проксируемая функция будет вызываться с тем же объектом this, в которым был вызван метод jQuery.proxy(), это позволяет частично применять аргументы функции без изменения контекста.

Добавлен в версии jQuery 1.4 (синтаксис расширен в версии 1.6)

Параметры

functionName
Функция, контекст которой будет изменен.
context
Объект, для которого должен быть задан контекст функции.
name
Имя функции, контекст которой будет изменен (должен быть свойством объекта, указанного в context).
additionalArguments
Любое число аргументов, которые будут передаваны функции, на которую ссылается аргумент function, или name.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Использование jQuery метода $.proxy()</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script>
      $(document).ready(function() {
        // инициализируем переменную
        var myObject = {
          name: 'proxy',
          age: 30,
          insertName: function(args) {
            $('p').append(args + ' Мое имя: ' + this.name + '<br>')
          },
          insertAge: function(args) {
            $('p').append(args + ' Мой возраст: ' + this.age + '<br>')
          }
        }

        // задаем функцию при нажатии на первый элемент <button> в документе
        $('button:first').on(
          'click',
          $.proxy(myObject, 'insertName', 'Привет!')
        )

        // задаем функцию при нажатии на последний элемент <button> в документе
        $('button:last').on(
          'click',
          $.proxy(myObject.insertAge, myObject, 'Alloha!')
        )
      })
    </script>
  </head>
  <body>
    <button>Показать имя</button>
    <button>Показать возраст</button>
    <p></p>
  </body>
</html>

В этом примере с использованием метода .on() мы приcоединяем для выбранных элементов <button> (кнопка) свои функции обработчика событий click.

При нажатии на первую кнопку в документе будет вызываться метод jQuery.proxy(), который возвращает новую функцию, которая будет иметь определенный контекст выполнения, в нашем случае контекст объекта переменной myObject, из которого мы вызываем метод insertName. Этот метод объекта с помощью метода .append() вставляет содержимое, указанное в параметре метода в конец каждого выбранного элемента <p> в наборе совпавших элементов.

По аналогии с предыдущей при нажатии на последнюю кнопку в документе будет вызываться метод jQuery.proxy(), который возвращает новую функцию, которая будет иметь определенный контекст выполнения, в нашем случае контекст объекта переменной myObject, из которого мы вызываем метод insertAge. Этот метод объекта с помощью метода .append() вставляет содержимое, указанное в параметре метода в конец каждого выбранного элемента <p> в наборе совпавших элементов. Обратите внимание на отличие в синтаксисе использования метода jQuery.proxy().

Результат:

Пример использования

Пример использования метода jQuery.proxy()

Ссылки