# jQuery.proxy()

所属分类：事件 > 绑定事件处理器 | 工具类 英文文档：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开始, 当`context`为`null` 或 `undefined`，代理函数将通过`this`对象被调用。（注：也就是相当于`context`为`this`对象）。允许`$.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: