jQuery метод $.proxy()

jQuery события

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

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 события