jQuery.proxy() usage

Question

I was reading the api about jQuery.proxy(). It looks promising but I was wondering in what situation is this best use. Can anyone enlighten me?

Answer 1

When you want a function that has the this value bound to a specific object. For example, in callbacks such as event handlers, AJAX callbacks, timeouts, intervals, custom objects, etc.

This is just a manufactured example of a situation where it might be useful. Assuming there is a Person object which has a property name. It is also linked to a text input element, and whenever the input value changes, the name in this person object gets updated too.

function Person(el) {     this.name = '';      $(el).change(function(event) {         // Want to update this.name of the Person object,         // but can't because this here refers to the element         // that triggered the change event.     }); } 

One solution that we often use is to store the this context in a variable and use that inside the callback function such as:

function Person(el) {     this.name = '';      var self = this; // store reference to this      $(el).change(function(event) {         self.name = this.value; // captures self in a closure     }); } 

Alternatively, we could have used jQuery.proxy here so the reference to this refers to the object of Person instead of the element that triggered the event.

function Person(el) {     this.name = '';      $(el).change(jQuery.proxy(function(event) {         this.name = event.target.value;     }, this)); } 

Note that this feature has been standardized into ECMAScript 5 which now includes the bind method borrowed from prototypejs and is already available on some browsers.

function Person(el) {     this.name = '';      $(el).change(function(event) {         this.name = event.target.value;     }.bind(this)); // we're binding the function to the object of person } 

Answer 2

It's just a shorthand method of setting the context for a closure, for example:

$(".myClass").click(function() {   setTimeout(function() {     alert(this); //window   }, 1000); }); 

However often we want this to remain the same as the method we were in, which $.proxy() is used for, like this:

$("button").click(function() {   setTimeout($.proxy(function() {     alert(this); //button   }, this), 1000); });​ 

It's usually used for delayed calls, or anywhere you don't want to do a longhand method of declaring a closure. The string method of pointing the context to an object...well I haven't come across a practical use in every day code yet, but I'm sure there are applications, just depends what your object/event structure is.