jQuery.proxy( function, context )Возвращает: Функцияверсия устарела: 3.3
Описание: Принимает функцию и возвращает новую, которая всегда будет иметь определённый контекст.
-
версия добавлена: 1.4jQuery.proxy( function, context )
-
версия добавлена: 1.4jQuery.proxy( context, name )
-
версия добавлена: 1.6jQuery.proxy( function, context [, additionalArguments ] )
-
версия добавлена: 1.6jQuery.proxy( context, name [, additionalArguments ] )
- контекстТип: ОбъектОбъект, к которому должен быть установлен контекст функции.
- имяТип: СтрокаИмя функции, контекст которой будет изменён (должно быть свойством объекта
context). - дополнительныеАргументыТип: ЛюбоеЛюбое количество аргументов, которые будут переданы функции, указанной в аргументе
name.
-
Примечание: Этот API устарел в jQuery 3.3; используйте вместо него метод Function.prototype.bind.
Этот метод наиболее полезен для привязки обработчиков событий к элементу, где контекст указывает на другой объект. Кроме того, jQuery гарантирует, что даже если вы привяжете функцию, возвращённую jQuery.proxy(), она всё равно отвяжет правильную функцию, если передать исходную.
Однако имейте в виду, что система привязки событий jQuery присваивает уникальный идентификатор каждой обработке события, чтобы отслеживать её при использовании для указания функции, которая должна быть отвязана. Функция, представленная jQuery.proxy(), рассматривается системой событий как одна функция, даже когда она используется для привязки разных контекстов. Чтобы избежать отвязки неправильного обработчика, используйте уникальное пространство имён событий для привязки и отвязки (например, "click.myproxy1"), а не указание прокси-функции во время отвязки.
Начиная с jQuery 1.6, можно передать любое количество дополнительных аргументов в $.proxy(), и они будут переданы функции, контекст которой будет изменён.
Начиная с jQuery 1.9, когда context является null или undefined, проксированная функция будет вызвана с тем же объектом this, что и прокси. Это позволяет использовать $.proxy() для частичного применения аргументов функции без изменения контекста.
Примеры:
Изменение контекста функций, привязанных к обработчику клика, с помощью подписи "функция, контекст". Отвяжите первый обработчик после первого клика.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery.proxy demo</title>
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
<p><button type="button" id="test">Test</button></p>
<div id="log"></div>
<script>
var me = {
type: "zombie",
test: function( event ) {
// Without proxy, `this` would refer to the event target
// use event.target to reference that element.
var element = event.target;
$( element ).css( "background-color", "red" );
// With proxy, `this` refers to the me object encapsulating
// this function.
$( "#log" ).append( "Hello " + this.type + "<br>" );
$( "#test" ).off( "click", this.test );
}
};
var you = {
type: "person",
test: function( event ) {
$( "#log" ).append( this.type + " " );
}
};
// Execute you.test() in the context of the `you` object
// no matter where it is called
// i.e. the `this` keyword will refer to `you`
var youClick = $.proxy( you.test, you );
// attach click handlers to #test
$( "#test" )
// this === "zombie"; handler unbound after first click
.on( "click", $.proxy( me.test, me ) )
// this === "person"
.on( "click", youClick )
// this === "zombie"
.on( "click", $.proxy( you.test, me ) )
// this === "<button> element"
.on( "click", you.test );
</script>
</body>
</html> Демо:
Принудительное применение контекста функции с помощью подписи "контекст, имя функции". Отвяжите обработчик после первого клика.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery.proxy demo</title>
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
<p><button id="test">Test</button></p>
<p id="log"></p>
<script>
var obj = {
name: "John",
test: function() {
$( "#log" ).append( this.name );
$( "#test" ).off( "click", obj.test );
}
};
$( "#test" ).on( "click", jQuery.proxy( obj, "test" ) );
</script>
</body>
</html> Демо:
Изменение контекста функции, привязанной к обработчику клика,
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery.proxy demo</title>
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
<p><button type="button" id="test">Test</button></p>
<div id="log"></div>
<script>
var me = {
// I'm a dog
type: "dog",
// Note that event comes *after* one and two
test: function( one, two, event ) {
$( "#log" )
// `one` maps to `you`, the 1st additional
// argument in the $.proxy function call
.append( "<h3>Hello " + one.type + ":</h3>" )
// The `this` keyword refers to `me`
// (the 2nd, context, argument of $.proxy)
.append( "I am a " + this.type + ", " )
// `two` maps to `they`, the 2nd additional
// argument in the $.proxy function call
.append( "and they are " + two.type + ".<br>" )
// The event type is "click"
.append( "Thanks for " + event.type + "ing." )
// The clicked element is `event.target`,
// and its type is "button"
.append( "the " + event.target.type + "." );
}
};
var you = { type: "cat" };
var they = { type: "fish" };
// Set up handler to execute me.test() in the context
// of `me`, with `you` and `they` as additional arguments
var proxy = $.proxy( me.test, me, you, they );
$( "#test" )
.on( "click", proxy );
</script>
</body>
</html>