jQuery .proxy() Method

What You’ll Learn

jQuery.proxy() takes a function and returns a new one that always runs with a fixed this value. This tutorial covers both official signatures, partial argument application, event-handler binding, safe unbinding with namespaces, migration to Function.prototype.bind(), and pitfalls every beginner should know.

Introduction

In JavaScript, the value of this depends on how a function is called — not where it is defined. When you pass an object method to a jQuery event handler, this inside that method usually becomes the DOM element that was clicked, not your object. That breaks code expecting this.name or this.save().

jQuery added jQuery.proxy() in version 1.4 to lock this to a chosen object. It was deprecated in 3.3 in favor of the native Function.prototype.bind(), but remains widely used in legacy plugins and tutorials. Understanding $.proxy() also teaches the same context problem that arrow functions and .bind() solve in modern JavaScript.

Understanding jQuery.proxy()

$.proxy() does not call your function immediately. It returns a wrapper function that, when invoked later, calls the original with this forced to the context you specified. The wrapper can be passed to .on(), setTimeout, or any API expecting a callback.

jQuery’s event subsystem recognizes proxied functions: if you pass the original function to .off(), jQuery can still remove the correct proxied handler. When the same function is proxied to different contexts, however, use event namespaces to avoid removing the wrong handler.

📝 Syntax

Four signatures from the official jQuery API:

1. Function and context — jQuery.proxy( function, context ) (since 1.4)

jQuery.proxy( function, context )

• function — the function whose this will be locked.
• context — the object that becomes this when the returned function runs.

2. Context and method name — jQuery.proxy( context, name ) (since 1.4)

jQuery.proxy( context, "methodName" )

Shorthand for binding context.methodName with this === context.

3. With additional arguments — since jQuery 1.6

jQuery.proxy( function, context [, additionalArguments ] )
jQuery.proxy( context, name [, additionalArguments ] )

Extra arguments are prepended before arguments received at call time (such as the event object).

4. Null context (partial apply only) — since jQuery 1.9

// context null/undefined → caller's this is preserved
var fn = jQuery.proxy( myFn, null, "preset" );

Official migration template

// jQuery — deprecated since 3.3
var bound = jQuery.proxy( obj.handle, obj );
$( "#btn" ).on( "click", bound );

// Native ES5+ — preferred today
var bound = obj.handle.bind( obj );
$( "#btn" ).on( "click", bound );

Return value

• Returns a new function — the original is not modified.
• The proxied function carries jQuery metadata so .off(originalFn) can unbind it.

Examples Gallery

Examples 1–3 follow the official jQuery API documentation. Examples 4–5 cover native .bind() migration and namespace-safe unbinding. Open the Try-it links to experiment in the browser.

var me = {
  type: "zombie",
  test: function( event ) {
    var element = event.target;
    $( element ).css( "background-color", "red" );
    $( "#log" ).append( "Hello " + this.type + " " );
    $( "#test" ).off( "click", this.test );
  }
};

var you = {
  type: "person",
  test: function( event ) {
    $( "#log" ).append( this.type + " " );
  }
};

var youClick = $.proxy( you.test, you );

$( "#test" )
  .on( "click", $.proxy( me.test, me ) )   // this === me ("zombie")
  .on( "click", youClick )                   // this === you ("person")
  .on( "click", $.proxy( you.test, me ) )   // this === me (wrong object!)
  .on( "click", you.test );                  // this === DOM button

One click on #test appends roughly:

"Hello zombie person zombie "

Proxied me.test → this.type is "zombie"
Proxied you.test with you → "person"
Proxied you.test with me → "zombie" (wrong context demo)
Bare you.test → this is the button element

var obj = {
  name: "John",
  test: function() {
    $( "#log" ).append( this.name );
    $( "#test" ).off( "click", obj.test );
  }
};

$( "#test" ).on( "click", jQuery.proxy( obj, "test" ) );

Click #test → log shows "John"

this.name works because this === obj

Handler unbinds itself after first click

var me = {
  type: "dog",
  test: function( one, two, event ) {
    $( "#log" )
      .append( " Hello " + one.type + ": " )
      .append( "I am a " + this.type + ", " )
      .append( "and they are " + two.type + ". " )
      .append( "Thanks for " + event.type + "ing." )
      .append( " the " + event.target.type + "." );
  }
};

var you = { type: "cat" };
var they = { type: "fish" };

var proxy = $.proxy( me.test, me, you, they );

$( "#test" ).on( "click", proxy );

Click #test → log shows:

" Hello cat: I am a dog, and they are fish. Thanks for clicking. the button."

one = you (cat), this = me (dog), two = they (fish), event = click

var user = {
  name: "Alex",
  greet: function() {
    return "Hi, " + this.name;
  }
};

// Legacy jQuery (deprecated 3.3)
$( "#jq" ).on( "click", $.proxy( user.greet, user ) );

// Modern native (preferred)
$( "#native" ).on( "click", user.greet.bind( user ) );

Both buttons log "Hi, Alex"

$.proxy(fn, ctx) and fn.bind(ctx) produce the same this binding

Use .bind() in all new code — no deprecation warning

var a = { handle: function() { /* context A */ } };
var b = { handle: function() { /* context B */ } };

// Same function shape, different contexts — jQuery sees one handler id
$( "#btn" )
  .on( "click.widgetA", $.proxy( a.handle, a ) )
  .on( "click.widgetB", $.proxy( b.handle, b ) );

// Remove only widget A's handler
$( "#btn" ).off( "click.widgetA" );

Before: click runs both [A] and [B]

.off("click.widgetA"): only [B] runs

.off("click.widgetB"): only [A] runs

Namespaces avoid removing the wrong proxied handler

🚀 Common Use Cases

• Object method handlers — $("#save").on("click", $.proxy(viewModel.save, viewModel)).
• Plugin callbacks — pass proxied methods to setTimeout or AJAX without losing this.
• Class-style widgets — bind multiple DOM events to one controller object in a constructor.
• Partial application — preset configuration objects before the event argument arrives.
• Legacy maintenance — read jQuery UI and older plugins that rely on $.proxy().
• Migration audits — replace $.proxy(fn, ctx) with fn.bind(ctx) during jQuery 3.3+ upgrades.

📝 Notes

• jQuery.proxy() was added in jQuery 1.4 and deprecated in 3.3. Prefer Function.prototype.bind() in new code.
• Additional arguments for partial application were added in jQuery 1.6.
• Since jQuery 1.9, null or undefined context preserves the caller’s this (partial apply without rebinding).
• jQuery can unbind a proxied handler when you pass the original function to .off().
• Proxying the same function to different contexts shares one internal handler id — use event namespaces for safe removal.
• Arrow functions (() => obj.method()) lexically capture this and are an alternative when you control the method body.
• $.proxy(context, "name") requires name to be a property of context holding a function.

💡 Best Practices