jQuery jQuery.proxy() Method

What You’ll Learn

The jQuery.proxy() utility returns a new function that always runs with a chosen this value. This tutorial covers both API signatures, the official jQuery event-handler demos, partial argument binding, comparisons with Function.prototype.bind(), and safe unbinding patterns.

Introduction

In JavaScript, this inside a function depends on how the function is called — not where it was written. That trips up beginners attaching object methods as click handlers: this becomes the clicked element instead of your object.

jQuery introduced jQuery.proxy() (also written $.proxy()) in version 1.4 to solve this. It wraps a function so it always executes with the context you choose. The API was deprecated in jQuery 3.3 in favor of native Function.prototype.bind(), but you will still encounter $.proxy in legacy plugins and tutorials.

Understanding the jQuery.proxy() Method

jQuery.proxy() does not run your function immediately — it returns a new wrapper function. When that wrapper is invoked (by a click, timer, or direct call), the original function runs with this locked to the context you supplied.

jQuery also tracks the link between the wrapper and the original function for event unbinding. That convenience comes with a caveat: multiple proxies of the same function can look identical to jQuery’s event subsystem, so use namespaced events when removing handlers.

📝 Syntax

jQuery.proxy supports two primary forms (plus optional extra arguments since 1.6):

jQuery.proxy( function, context [, arg1 [, arg2 ... ]] )
jQuery.proxy( context, name [, arg1 [, arg2 ... ]] )

Parameters

• function — the function whose this context will be fixed (first signature).
• context — the object that becomes this inside the wrapped function.
• name — string name of a method on context (second signature).
• additionalArguments — optional values prepended before arguments passed at call time (since jQuery 1.6).

Return value

• A new function with the bound context (and optionally pre-filled leading arguments).

Minimal workflow

var handler = $.proxy(myObject.onClick, myObject);
$("#btn").on("click.myApp", handler);

Examples Gallery

Examples 1–3 follow the official jQuery API demos. Open DevTools or use the Try-it links to run them interactively.

var me = {
  type: "zombie",
  test: function (event) {
    console.log("me.test this.type =", this.type);
  }
};

var you = {
  type: "person",
  test: function (event) {
    console.log("you.test this.type =", this.type);
  }
};

// this === "person" no matter where youClick is invoked
var youClick = $.proxy(you.test, you);

// Simulated calls (fakeEl mimics a DOM event target):
var fakeEl = { type: "element" };
you.test.call(fakeEl);          // this.type === "element"
youClick.call(fakeEl);          // this.type === "person"
$.proxy(me.test, me).call({});  // this.type === "zombie"

you.test this.type = element
you.test this.type = person
me.test this.type = zombie

var obj = {
  name: "John",
  test: function () {
    return this.name;
  }
};

var bound = $.proxy(obj, "test");

console.log(bound()); // "John"

John

var me = {
  type: "dog",
  test: function (one, two, event) {
    return "Hello " + one.type + ": I am a " + this.type +
      ", and they are " + two.type + ".";
  }
};

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

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

// When called, you and they are args 1 and 2; event would be arg 3
console.log(proxy({ type: "click" }));

Hello cat: I am a dog, and they are fish.

var widget = {
  label: "Save",
  handleClick: function () {
    return "Clicked: " + this.label;
  }
};

var withProxy = $.proxy(widget.handleClick, widget);
var withBind  = widget.handleClick.bind(widget);

console.log(withProxy()); // Clicked: Save
console.log(withBind());  // Clicked: Save

Clicked: Save
Clicked: Save

var app = {
  count: 0,
  tick: function () {
    this.count++;
    return this.count;
  }
};

var handler = $.proxy(app.tick, app);

// Bind with a unique namespace
$("#btn").on("click.myTick", handler);

// Later — remove by namespace, not by proxy reference
$("#btn").off("click.myTick");

console.log("Handler removed safely");

Handler removed safely

🚀 Common Use Cases

• Event handlers — keep this pointing at your widget/controller object on clicks and keyboard events.
• Plugin methods — pass $.proxy(options.onComplete, instance) into jQuery APIs that invoke callbacks later.
• Timers — bind setInterval / setTimeout callbacks to the correct object context.
• Method-by-name config — use $.proxy(ctx, "handleSubmit") when handler names come from strings.
• Partial application — pre-fill leading arguments before the event object arrives.
• Legacy maintenance — read and refactor older jQuery codebases that predated widespread bind() usage.

📝 Notes

• Available since jQuery 1.4; additional-argument form since 1.6; deprecated in jQuery 3.3.
• Since jQuery 1.9, when context is null or undefined, the proxied function uses the same this as the proxy call — useful for partial application only.
• Prefer Function.prototype.bind() in new code unless you need jQuery’s legacy unbind behavior.
• Use event namespaces (click.myHandler) when unbinding proxied handlers.
• Arrow functions capture lexical this but cannot serve as constructors and behave differently with arguments.
• Does not copy the function — it wraps the original; changes to obj.method after proxying still affect calls.

💡 Best Practices