# jQuery.proxy()

## jQuery.proxy ( function, context ) Returns: Function version added: 1.4

- function
  Type: Function
  The function whose context will be changed.

- context
  Type: PlainObject
  The object to which the context (this) of the function should be set.

## jQuery.proxy ( context, name ) Returns: Function version added: 1.4

- context
  Type: PlainObject
  The object to which the context of the function should be set.

- name
  Type: String
  The name of the function whose context will be changed (should be a property of the context object).

## jQuery.proxy ( function, context, additionalArguments ) Returns: Function version added: 1.6

- function
  Type: Function
  The function whose context will be changed.

- context
  Type: PlainObject
  The object to which the context (this) of the function should be set.

- additionalArguments
  Type: Anything
  Any number of arguments to be passed to the function referenced in the function argument.

## jQuery.proxy ( context, name, additionalArguments ) Returns: Function version added: 1.6

- context
  Type: PlainObject
  The object to which the context of the function should be set.

- name
  Type: String
  The name of the function whose context will be changed (should be a property of the context object).

- additionalArguments
  Type: Anything
  Any number of arguments to be passed to the function named in the name argument.

Description: Takes a function and returns a new one that will always have a particular context.

This method is most useful for attaching event handlers to an element where the context is pointing back to a different object. Additionally, jQuery makes sure that even if you bind the function returned from `jQuery.proxy()` it will still unbind the correct function if passed the original.

Be aware, however, that jQuery's event binding subsystem assigns a unique id to each event handling function in order to track it when it is used to specify the function to be unbound. The function represented by `jQuery.proxy()` is seen as a single function by the event subsystem, even when it is used to bind different contexts. To avoid unbinding the wrong handler, use a unique event namespace for binding and unbinding (e.g., `"click.myproxy1"`) rather than specifying the proxied function during unbinding.

As of jQuery 1.6, any number of additional arguments may be supplied to `$.proxy()`, and they will be passed to the function whose context will be changed.

As of jQuery 1.9, when the `context` is `null` or `undefined` the proxied function will be called with the same `this` object as the proxy was called with. This allows `$.proxy()` to be used to partially apply the arguments of a function without changing the context.

## Examples:

#### Example: Change the context of functions bound to a click handler using the "function, context" signature. Unbind the first handler after first click.

    <!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>css demo</title>

      <script src="//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>

#### Demo:

#### Example: Enforce the context of the function using the "context, function name" signature. Unbind the handler after first click.

    <!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>css demo</title>

      <script src="//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>

#### Demo:

#### Example: Change the context of a function bound to the click handler,

    <!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>css demo</title>

      <script src="//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>

#### Demo: