Spec-Zone.ru › jQuery

jQuery.proxy()

jQuery.proxy( function, context )Возвращает: Функцияверсия устарела: 3.3

Описание: Принимает функцию и возвращает новую, которая всегда будет иметь определённый контекст.

  • версия добавлена: 1.4jQuery.proxy( function, context )

    • функция
      Тип: Функция()
      Функция, контекст которой будет изменён.
    • контекст
      Тип: Объект
      Объект, к которому должен быть установлен контекст (this) функции.
  • версия добавлена: 1.4jQuery.proxy( context, name )

    • контекст
      Тип: Объект
      Объект, к которому должен быть установлен контекст функции.
    • имя
      Тип: Строка
      Имя функции, контекст которой будет изменён (должно быть свойством объекта context).
  • версия добавлена: 1.6jQuery.proxy( function, context [, additionalArguments ] )

    • функция
      Тип: Функция()
      Функция, контекст которой будет изменён.
    • контекст
      Тип: Объект
      Объект, к которому должен быть установлен контекст (this) функции.
    • дополнительныеАргументы
      Тип: Любое
      Любое количество аргументов, которые будут переданы функции, указанной в аргументе function.
  • версия добавлена: 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>

Демо:

© The jQuery Foundation and other contributors
Licensed under the MIT License.
https://api.jquery.com/jQuery.proxy

Spec-Zone.ru

Настройки Оффлайн Что нового Помощь О нас
Spec-Zone .ru
спецификации, руководства, описания, API