Binding Context with proxy()
In this page:
What is proxy()?
$.proxy() returns a new function that always runs with a fixed this value, no matter how or where that function is later called. It exists because JavaScript's this binding depends on how a function is invoked, which can produce surprising results when a method is passed around as a callback.
Example: What is proxy()?
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<script>
const obj = {
name: "Widget",
show: function() { console.log(this.name); }
};
const bound = $.proxy(obj.show, obj);
bound();
</script>
</body>
</html>Why Context Matters
A callback — like an event handler or a setTimeout function — often ends up running with a different this value than the object it was originally defined on, because the calling code, not the original object, determines this. $.proxy() lets you lock this to a specific object ahead of time so the callback always behaves predictably.
Example: Why Context Matters
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<button id="btn">Click</button>
<script>
const obj = {
name: "Widget",
handleClick: function() { console.log(this.name); }
};
$("#btn").on("click", obj.handleClick);
// logs undefined -- this is the button, not obj
</script>
</body>
</html>Pass Arguments with proxy()
proxy() can also bind arguments to a function in addition to fixing its this value, which is useful when an event handler or callback needs extra context data that isn't provided by the event itself.
Example: Pass Arguments with proxy()
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<script>
function greet(greeting) { console.log(greeting, this.name); }
const obj = {name: "Alice"};
const bound = $.proxy(greet, obj);
bound("Hello");
</script>
</body>
</html>Use proxy with Events
Events frequently pass callbacks around in ways that break the expected this binding — for example, a method used directly as a click handler loses its connection to the object it came from. Wrapping that method with proxy() keeps this pointing at the right object even when the handler runs later, triggered by the browser rather than your own code.
Example: Use proxy with Events
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<button id="btn">Click</button>
<script>
const obj = {
name: "Widget",
handleClick: function() { console.log(this.name); }
};
$("#btn").on("click", $.proxy(obj.handleClick, obj));
</script>
</body>
</html>Small proxy() Project
proxy() is most valuable whenever an object's own methods get used as standalone callbacks — for timers, event handlers, or AJAX completion functions — and you need this inside that method to still refer back to the original object.
Example: Small proxy() Project
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<script>
const timer = {
label: "Countdown",
tick: function() { console.log(this.label, "ticking"); }
};
setTimeout($.proxy(timer.tick, timer), 100);
</script>
</body>
</html>Chapter Quiz — Complete all 6 topics to unlock
0/6 topics done
Complete these topics first: