jQuery.proxy()


jQuery.proxy( function, context )返回: Function

描述: 接受一个函数,然后返回一个新函数,并且这个新函数始终保持了特定的上下文语境。

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

    • function
      类型: Function()
      将要改变上下文语境的函数。
    • context
      类型: PlainObject
      函数的上下文语境(this)会被设置成这个 object 对象。
  • 添加的版本: 1.4jQuery.proxy( context, name )

    • context
      类型: PlainObject
      函数的上下文语境会被设置成这个 object 对象。
    • name
      类型: String
      将要改变上下文语境的函数名(这个函数必须是前一个参数 context 对象的属性)。
  • 添加的版本: 1.6jQuery.proxy( function, context [, additionalArguments ] )

    • function
      类型: Function()
      将要改变上下文语境的函数。
    • context
      类型: PlainObject
      函数的上下文语境会被设置成这个 object 对象。
    • additionalArguments
      类型: Anything
      任何数目的参数传递给function参数的函数引用。
  • 添加的版本: 1.6jQuery.proxy( context, name [, additionalArguments ] )

    • context
      类型: PlainObject
      函数的上下文语境会被设置成这个 object 对象。
    • name
      类型: String
      将要改变上下文语境的函数名(这个函数必须是前一个参数 context 对象的属性)。
    • additionalArguments
      类型: Anything
      任何数目的参数传递给name参数中命名的函数。

这个方法通常在向一个元素上附加事件处理函数时,上下文语境实际是指向另一个对象的情况下使用。另外,jQuery 能够确保即使你绑定的函数是经过 jQuery.proxy() 处理过的函数,你依然可以用原先的函数来正确地取消绑定。

要知道,jQuery的事件绑定子系统为每一个事件处理函数分配一个唯一的ID 用于对其进行跟踪,这样的话,当需要解除绑定特定的事件处理时,系统就知道该解除绑定哪个事件处理函数了。jQuery.proxy()参数中的 function 会被事件子系统当成一个单独的函数,即使是当它用于绑定不同的上下文时。为了避免错误的解除绑定事件,可以在绑定或解除绑定时,使用一个唯一的事件命令空间(例如, "click.myproxy1"),这样比在解除绑定时仅指定被代理函数要好。

从jQuery 1.6开始, 任意数量的附加参数可以提供给$.proxy(),并且它们将被传递给那些上下文将被改变的函数。

从jQuery 1.9开始, 当contextnullundefined,代理函数将通过this对象被调用。(注:也就是相当于contextthis对象)。允许$.proxy()应用一个函数的部分参数,而不改变上下文。

例子:

Example: 修改使用参数为"function, context"的jQuery.proxy()方法绑定的点击事件的上下文语境。并且在第一次点击事件执行后,解除原先的绑定。

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>
<head>
<script src="https://code.jquery.com/jquery-latest.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").unbind("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>

Demo:

Example: 通过调用参数为"context, function name"的jQuery.proxy()方法,强制修改函数的上下文语境。 并且在第一次点击事件执行后,解除绑定。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-latest.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>

Demo:

Example: 更改绑定点击处理程序函数的上下文。

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
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-latest.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>

Demo: