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

1.4 (синтаксис расширен в версии 1.6)

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

Параметр	Описание
function	Функция, контекст которой будет изменен.
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>

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

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

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

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

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

jQuery события