當前位置: 首頁>>代碼示例 >>用法及示例精選 >>正文

JQuery jQuery.proxy()用法及代碼示例


用法 
jQuery.proxy( function, context ) => Function

不推薦使用的版本：3.3

說明：接受一個函數並返回一個始終具有特定上下文的新函數。

  • 添加的版本：1.4jQuery.proxy( function, context )

    • function
      類型：Function ()
      將更改其上下文的函數。
    • context
      類型：PlainObject
      應設置函數上下文 (this) 的對象。

  • 添加的版本：1.4jQuery.proxy( context, name )

    • context
      類型：PlainObject
      應為其設置函數上下文的對象。
    • name
      類型：String
      將更改其上下文的函數的名稱(應該是context 對象的屬性)。

  • 添加的版本：1.6jQuery.proxy( function, context [, additionalArguments ] )

    • function
      類型：Function ()
      將更改其上下文的函數。
    • context
      類型：PlainObject
      應設置函數上下文 (this) 的對象。
    • additionalArguments
      類型：Anything
      要傳遞給 function 參數中引用的函數的任意數量的參數。

  • 添加的版本：1.6jQuery.proxy( context, name [, additionalArguments ] )

    • context
      類型：PlainObject
      應為其設置函數上下文的對象。
    • name
      類型：String
      將更改其上下文的函數的名稱(應該是context 對象的屬性)。
    • additionalArguments
      類型：Anything
      要傳遞給在name 參數中命名的函數的任意數量的參數。

注意：此 API 在 jQuery 3.3 中已被棄用；請改用本機 Function.prototype.bind 方法。

此方法對於將事件處理程序附加到上下文指向不同對象的元素最有用。此外，jQuery 確保即使您綁定從 jQuery.proxy() 返回的函數，如果傳遞原始函數，它仍然會取消綁定正確的函數。

但是請注意，jQuery 的事件綁定子係統為每個事件處理函數分配一個唯一的 id，以便在它用於指定要取消綁定的函數時對其進行跟蹤。 jQuery.proxy() 表示的函數被事件子係統視為單個函數，即使它用於綁定不同的上下文。為避免解除綁定錯誤的處理程序，請使用唯一的事件命名空間進行綁定和解除綁定(例如 "click.myproxy1" )，而不是在解除綁定期間指定代理函數。

As of 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.5.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.5.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.5.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>

演示：

相關用法


注：本文由純淨天空篩選整理自jquery.com大神的英文原創作品 jQuery.proxy()。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。