Quick Tip: Learning jQuery 1.4′s $.proxy
One of my favorite new features in jQuery 1.4 is the new $.proxy method. It allows us the ability to force a particular context when calling a method. In JavaScript, there can be times when it’s difficult to hold on to the this keyword. For example, when it’s bound to some event handler, this now refers to the target of the handler, rather than your desired object.
If this sounds a bit confusing, don’t worry; today’s four-minute video quick tip should clear things up.
// Create an object.
var obj = {
// this = obj
somevar : 'some value',
doSomething : function() {
alert(this.somevar);
}
};
// When bound to an event handler, this will
// refer to the target of the handler, or the div - not obj.
$('div').click(obj.doSomething); // undefined.
// With $.proxy, we pass two parameters.
// 1. The method to call.
// 2. The context.
// In this case, we're forcing obj to once again be equal to this.
$('div').click( $.proxy(obj.doSomething, obj) ); // some value
Be sure to refer to the jQuery API for more information on $.proxy!
- Follow us on Twitter, or subscribe to the Nettuts+ RSS Feed for the best web development tutorials on the web.
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Jeffrey Way
Join our newsletter!
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Nettuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
interested…
I will spam here once again. What was the html header snippet awesome paste tool you are using? I know there was an article about it.. but i cannot find it anymore :(
I use TextExpander.
Is there something similar for Windows?
As always Great Tut! And as always enjoyed you tutorial.
Try: http://lifehacker.com/238306/lifehacker-code-texter-windows
great QuickTip as always, thx Jeff!
i really enjoy these quicktips Jeffery! i think they also act as a very good reference of the techniques thanks to the written part. i learnt something about firebug breakpoints in this tip too. Maybe you you should do a screencast on firebug debugging?
I second that! Even a simple Quick tip would be nice.
Interesting tutorial
I don’t see this as a good thing to have. Basically, you’re allowing a programmer who has no concept of scope and how “this” is supposed to work to just go into a program and CHANGE scope. This will make debugging a nightmare AND programmers won’t have the ability to learn about scope.
It’s actually part of ES5 and it’s called Function.prototype.bind which is very close to Prototypes version of jQuery.proxy() it also has the same name.
Hi jeff
though i get the understand the idea of this proxy function and by name is clear that this function acts as proxy for objs and function
one thing i cant think is the use of it, actually jquery means less code so how does it saves us from writing less code in comparison to available methods of calling objs
salman
very nice post and informative
great tut, thanks
This works for me:
var obj = new Object();
obj.somevar = ‘value’;
obj.somefunc = function() {
alert( ‘I have a ‘ + obj.somevar );
};
$(‘a’).click(obj.somefunc);
Yeah but the problem there is that you are referring to a single instance of the object within the object itself by using alert(‘…’ + obj.somevar);
What happens if you have multiple instances of that object?
You need to have the ‘this’ keyword so it points to the current object and by doing that the code would fail because ‘this’ would be pointing to the object jQuery creates with its $ function.
Yep. Well put.
great tutorial !
Thanks Jeff! Love these quick, yet useful tutorials.
Is it different of the .bind() function in prototype ?
Are you using kinda firebug for safari?
This a really neat. I have not heard of it. I can always rely on you guys to bring the latest innovations to the table.
Interesting tutorial.. I can’t wait tested on my site
Is there a way to pass parameters to the proxy function, unless I’m missing something?
Interesting stuff Jeffrey, thanks for sharing.
Thanks for it
I’m not much of a programmer but isn’t this reminding of a GOTO method?
Not much of a programming skill? Correct me if I’m wrong (just started learning)
Its about scope which means that if you’re inside an object, this points to the object you’re in.
$.proxy is a way to pass a reference of an object to the current scope so that this will refer to that object and not the jquery object.
—-
on a side note:
It would be interesting to know if it works with anon functions as well.
$(‘div’).click( $.proxy(function(){
this.doSomething();
}, MyObject));
That was super easy to learn! Thanks for making this post!
Nice…. on more jQuery feature in my brain. Thx!
Cool tips ,never heard about this ,anyway it was interest me,thanks
Short, sweet and very useful, thanks again Jeff. Context is everything, I think this is a must know and applied as rigorously as namespacing whenever a reference conflict might arise. A keeper!!!
useful tutorial thanks