jQuery proxy() Method

Beginner
7 min read
Updated: Oct 2026
4 examples
Live preview
jQuery proxy() — lock this context for callbacks and event handlers
Definition

What Is proxy()?

jQuery.proxy() (alias $.proxy) returns a new function that always runs with a chosen this value (added in jQuery 1.4). It is mainly used so object methods keep the right this when used as event handlers.

Remember
$.proxy(fn, context)           → bound function
$.proxy(context, "methodName") → bound method by name

// Without proxy: this → DOM element
// With proxy:    this → your object

// Modern equivalent:
fn.bind(context)
NeedUse
Lock this (legacy)$.proxy(fn, obj)
Lock this (new code)fn.bind(obj)
Attach handler.on("click", proxy)
Remove handler.off("click.ns")
Approach

How to Use proxy()

Pick a signature, create a bound function, then pass it to .on().

  1. Decide the object that should own this inside the handler.
  2. Call $.proxy(fn, context) or $.proxy(context, "name").
  3. Optionally pass extra arguments (jQuery 1.6+) to pre-fill parameters.
  4. Attach with .on(); unbind with a unique event namespace when needed.
PieceRequired?Role
function / nameYesFunction to wrap, or method name string on context
contextUsualObject used as this (or null to keep call-site this)
Extra argsNoPrepended to each call (since jQuery 1.6)
Return—New function with fixed context

Pseudocode

Pseudocode
function proxy(fnOrContext, contextOrName, ...extra):
    if first arg is a function:
        fn = first, thisObj = second
    else:
        thisObj = first, fn = thisObj[second]
    return function (...args):
        return fn.call(thisObj, ...extra, ...args)

// Typical jQuery flow:
handler = $.proxy(app.onClick, app)
$("#btn").on("click.app", handler)
Reference

Cheat Sheet

Keep these facts handy while binding handlers with jQuery.

TopicDetail
Syntax A$.proxy(function, context [, args...])
Syntax B$.proxy(context, "methodName" [, args...])
SincejQuery 1.4 (extra args: 1.6)
StatusDeprecated 3.3
Modern replacementFunction.prototype.bind()
Safe unbindNamespaced events + .off()
Attach.on()
Try it

Live Preview

Pick a sample, run a proxied call, and compare how this behaves.

Browser demo of $.proxy() — same ideas as the examples below.

Result
sample = Lock this
raw call this → "element"
proxied call this → "person"
Code

jQuery Examples

Short, copy-ready snippets. Open DevTools Console, or use Try It Yourself for a live editor.

Example 1 — Lock this with Function + Context

Official pattern: keep this on your object, not the caller.

jQuery
var you = {
  type: "person",
  test: function () {
    return this.type;
  }
};

var raw = you.test.call({ type: "element" });
var locked = $.proxy(you.test, you).call({ type: "element" });

console.log(raw);     // "element"
console.log(locked);  // "person"
Try It Yourself

How It Works

  1. Raw call. .call({ type: "element" }) forces this to that object.
  2. Proxy. $.proxy(you.test, you) returns a wrapper that ignores the caller’s this.
  3. Locked. Even with the same .call(...), the wrapper still uses you.
  4. Events. Same idea when jQuery calls your handler from a click target.

Example 2 — Context + Method Name

Official second signature: look up the method by string name.

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

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

console.log(handler());                    // "John"
console.log(handler.call({ name: "X" }));  // "John"
Try It Yourself

How It Works

  1. Lookup. $.proxy(obj, "test") uses obj.test as the function.
  2. Context. Calls always use obj as this.
  3. Stable. A second .call with another object still prints "John".
  4. Events. Attach with $("#test").on("click", handler) the same way.

Example 3 — Pre-fill Extra Arguments

Since jQuery 1.6, extra args are prepended before the normal call args.

jQuery
var me = {
  type: "dog",
  test: function (one, two) {
    return one.type + " / " + this.type + " / " + two.type;
  }
};

var proxy = $.proxy(me.test, me, { type: "cat" }, { type: "fish" });

console.log(proxy());  // "cat / dog / fish"
Try It Yourself

How It Works

  1. Extra args. cat and fish are baked into the proxy.
  2. Order. They become one and two before any later call arguments.
  3. Context. this.type is still "dog" from me.
  4. Events. On a click, the event object is appended after those pre-filled args.

Example 4 — Migrate to Function.prototype.bind()

Same result with the native API preferred since jQuery 3.3.

jQuery
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"
Try It Yourself

How It Works

  1. Same goal. Both wrappers keep this on widget.
  2. Legacy. $.proxy still works in jQuery 3.x.
  3. Modern. .bind(widget) is the recommended replacement.
  4. Migrate. Swap $.proxy(fn, ctx) for fn.bind(ctx) in new code.

Edge Cases & Pitfalls

Check these before wiring proxied handlers in real apps.

deprecated

Prefer bind() for new code

jQuery marked $.proxy deprecated in 3.3. Use Function.prototype.bind or arrows unless you are maintaining older jQuery code.

unbind

Proxied handlers share event identity

Unbinding one proxied wrapper can remove others built from the same original function. Prefer namespaced events like click.myProxy1.

null context

Null/undefined context keeps call-site this

Since jQuery 1.9, that mode is useful for partial application of arguments without forcing a new this.

DOM this

Need the element? Use event.target

After proxying, this is your object. Read the clicked node from the event argument instead.

Compatibility

Browser Support

jQuery.proxy() is available since jQuery 1.4 and was deprecated in jQuery 3.3. Prefer native Function.prototype.bind() in all modern browsers. This page focuses on browser use with jQuery loaded.

✓ Deprecated · jQuery 3.3

jQuery.proxy()

Works in Chrome, Firefox, Safari, and Edge with jQuery 1.4+. Prefer Function.prototype.bind() for new code.

Legacy Prefer bind()
Google Chrome All versions · Desktop & Mobile
Full support
Mozilla Firefox All versions · Desktop & Mobile
Full support
Apple Safari All versions · macOS & iOS
Full support
Microsoft Edge All versions · Chromium & Legacy
Full support
Internet Explorer IE 6+ · Legacy environments
Full support
Opera All modern versions
Full support
$.proxy() Legacy

Bottom line: Learn $.proxy() for legacy jQuery handlers. Write fn.bind(ctx) in new projects.

Analysis

Performance Notes

ApproachCostBest for
fn.bind(ctx)One wrapperAll new code
$.proxy(fn, ctx)One wrapperLegacy jQuery handlers
Create proxy inside a hot loopWastefulAvoid — create once, reuse the handler

Binding cost is tiny compared with DOM work. Create the proxied (or bound) function once and attach that same reference to events.

Remember

Key Takeaways

  • Role: $.proxy locks this for callbacks and handlers.
  • Modern: prefer fn.bind(ctx).
  • Unbind: use event namespaces, not only the function reference.
  • Status: deprecated in jQuery 3.3.

One line: know $.proxy for legacy handlers, but bind with fn.bind(ctx) (and namespaced .off()) in new code.

Frequently Asked Questions

jQuery.proxy() takes a function and returns a new function that always runs with a fixed this context. It is most useful for attaching object methods as event handlers so this inside the handler refers to your object, not the DOM element that fired the event.
jQuery.proxy(function, context) wraps a function with a chosen this value. jQuery.proxy(context, "methodName") looks up a method on an object by name and returns a bound version. Since jQuery 1.6 you can also pass extra arguments that are prepended to each call.
Both fix this and can pre-fill arguments. Native bind() is the modern standard. jQuery.proxy() was deprecated in 3.3; it also participates in jQuery's event tracking so .off() can match the original function in some cases — still prefer unique event namespaces when unbinding.
When you pass obj.handleClick directly to .on("click", obj.handleClick), JavaScript sets this to the clicked element. $.proxy(obj.handleClick, obj) returns a wrapper where this is always obj.
Not for new code. Prefer fn.bind(context) or arrow functions. Keep $.proxy only while maintaining legacy jQuery code that already uses it.
jQuery's event system can treat proxied wrappers as one identity. Binding $.proxy(fn, ctxA) and $.proxy(fn, ctxB), then calling .off with either proxy, may remove both. Use namespaced events like click.myHandler1 for safe unbind.
As of jQuery 1.9, a null or undefined context means the proxied function keeps the this value from the call site. That lets you partially apply arguments without forcing a new this.

Next: escapeSelector()

Learn how jQuery escapes special characters in CSS selectors.

escapeSelector tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

9 people found this page helpful

jQuery parseJSON() Method jQuery escapeSelector() Method