jQuery метод $.proxy()

Определение и применение

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

jQuery синтаксис:

Синтаксис 1.4:
$.proxy( function, context ) 
$.proxy( context, name ) 

Синтаксис 1.6:
$.proxy( function, context, additionalArguments ) 
$.proxy( context, name, additionalArguments ) 

function - Function
context - Anything
additionalArguments - Anything // необязательный параметр
name - String

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

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

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

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

Добавлен в версии jQuery

Значения параметров

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

<!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>

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

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

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

<button>Показать имя</button>
<button>Показать возраст</button>
<p></p>

$(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:first").on("click", $.proxy(myObject, "insertName", "Привет!"));
  $("button:last").on("click", $.proxy(myObject.insertAge, myObject, "Alloha!"));
});

Результат нашего примера: