From docs I understand that .proxy()
would change the scope of the function passed as an argument. Could someone please explain me this better? Why should we do this?
The Proxy method is Structural design pattern that allows you to provide the replacement for an another object. Here, we use different classes to represent the functionalities of another class. The most important part is that here we create an object having original object functionality to provide to the outer world.
bind({}) is that proxy is a loose connection. You can detach at any time. That's sort of what proxies are for. The invisible-interface between what you want to do and the thing that will actually do it.
Proxy is a structural design pattern that provides an object that acts as a substitute for a real service object used by a client. A proxy receives client requests, does some work (access control, caching, etc.) and then passes the request to a service object.
What it ultimately does is it ensures that the value of this
in a function will be the value you desire.
A common example is in a setTimeout
that takes place inside a click
handler.
Take this:
$('#myElement').click(function() {
// In this function, "this" is our DOM element.
$(this).addClass('aNewClass');
});
The intention is simple enough. When myElement
is clicked, it should get the class aNewClass
. Inside the handler this
represents the element that was clicked.
But what if we wanted a short delay before adding the class? We might use a setTimeout
to accomplish it, but the trouble is that whatever function we give to setTimeout
, the value of this
inside that function will be window
instead of our element.
$('#myElement').click(function() {
setTimeout(function() {
// Problem! In this function "this" is not our element!
$(this).addClass('aNewClass');
}, 1000);
});
So what we can do instead, is to call $.proxy()
, sending it the function and the value we want to assign to this
, and it will return a function that will retain that value.
$('#myElement').click(function() {
// ------------------v--------give $.proxy our function,
setTimeout($.proxy(function() {
$(this).addClass('aNewClass'); // Now "this" is again our element
}, this), 1000);
// ---^--------------and tell it that we want our DOM element to be the
// value of "this" in the function
});
So after we gave $.proxy()
the function, and the value we want for this
, it returned a function that will ensure that this
is properly set.
How does it do it? It just returns an anonymous function that calls our function using the .apply()
method, which lets it explicitly set the value of this
.
A simplified look at the function that is returned may look like:
function() {
// v--------func is the function we gave to $.proxy
func.apply( ctx );
// ----------^------ ctx is the value we wanted for "this" (our DOM element)
}
So this anonymous function is given to setTimeout
, and all it does is execute our original function with the proper this
context.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With