当前位置: 首页>>代码示例 >>用法及示例精选 >>正文

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()。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。