jQuery.proxy()

类别：事件 > 事件处理函数附件 | 实用工具

jQuery.proxy( function, context )返回类型：Function

描述：取用一个函数，返回一个将始终具有特定上下文的新函数。

对于要把事件处理函数附加到一个元素上，而其上下文指回到一个不同对象的情况，此方法特别有用。此外，jQuery确保了哪怕你绑定了从jQuery.proxy()返回的函数，你依然能够通过传入原来的函数来解绑正确的函数。

然而，要小心，jQuery的事件绑定子系统为每个事件处理函数赋了一个独一无二的值，为了在它用来指定要解绑的函数时跟踪它。由jQuery.proxy()代表的函数被事件子系统视为一个单独的函数，哪怕它用来绑定不同的上下文。为了避免解绑错误的处理函数，请使用唯一性事件处理空间来绑定和解绑（例如，"click.myproxy1"）而不是在解绑时指定代理函数。

自从jQuery 1.6以来，可以向$.proxy提供任意数目的额外函数，它们将被传递给那个将要改变上下文的函数。

自从jQuery 1.9以来，如果context是null或undefined，代理函数将用调用代理的相同this对象调用它。从而允许$.proxy()被用来应用函数的部分参数，而不需要改变上下文。

示例：

使用“function, context”签名改变绑定到一个点击事件的处理函数上下文。在第一次点击之后解绑第一个处理函数。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery.proxy demo</title>
  <script src="https://code.jquery.com/jquery-1.10.2.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>

演示：

利用“context, function, name”签名硬性指定函数的上下文。在第一次点击之后解绑处理函数。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery.proxy demo</title>
  <script src="https://code.jquery.com/jquery-1.10.2.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>

演示：

改变绑定到点击事件的处理函数的上下文。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery.proxy demo</title>
  <script src="https://code.jquery.com/jquery-1.10.2.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>

演示：