admin管理员组文章数量:1157304
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?
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?
- 1 According to the documentation, "This method is most useful for attaching event handlers to an element where the context is pointing back to a different object. Additionally, jQuery makes sure that even if you bind the function returned from jQuery.proxy() it will still unbind the correct function, if passed the original". Is there anything particular about that phrasing you find lacking? – bzlm Commented Feb 13, 2011 at 19:36
- 1 This is unclear here Additionally, jQuery makes sure that even if you bind the function returned from jQuery.proxy() it will still unbind the correct function, if passed the original".What's meant by original? – Aditya Shukla Commented Feb 13, 2011 at 19:46
- The original is that for which a proxy was created. But since you don't fully grasp this stuff, are you sure you need to use it? – bzlm Commented Feb 13, 2011 at 19:55
- 1 Here's a great video tutorial by nettuts showing how $.proxy works. http://net.tutsplus.com/tutorials/javascript-ajax/quick-tip-learning-jquery-1-4s-proxy/ – Hussein Commented Feb 13, 2011 at 20:13
- 1 @bzlm , I was reading jquery documentation when i came up at this method. – Aditya Shukla Commented Feb 14, 2011 at 0:48
4 Answers
Reset to default 390What 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.
Without going into greater detail (which would be necessary because this is about Context in ECMAScript, the this context variable etc.)
There are three different types of "Contexts" in ECMA-/Javascript:
- The global context
- Function context
- eval context
Every code is executed in its execution context. There is one global context and there can be many instances of function (and eval) contexts. Now the interesting part:
Every call of a function enters the function execution context. An execution context of a function looks like:
The Activation Object
Scope Chain
this value
So the this value is a special object which is related with the execution context. There are two functions in ECMA-/Javascript which may change the this value in a function execution context:
.call()
.apply()
If we have a function foobar()
we can change the this value by calling:
foobar.call({test: 5});
Now we could access in foobar
the object we passed in:
function foobar() {
this.test // === 5
}
This is exactly what jQuery.proxy()
does. It takes a function
and context
(which is nothing else than an object) and links the function by invoking .call()
or .apply()
and returns that new function.
I have written this function:
function my_proxy (func,obj)
{
if (typeof(func)!="function")
return;
// If obj is empty or another set another object
if (!obj) obj=this;
return function () { return func.apply(obj,arguments); }
}
The same goal can be achieved using a "Immediately-Invoked Function Expression, short: IIFE" self executing function:
$('#myElement').click(function() {
(function(el){
setTimeout(function() {
// Problem! In this function "this" is not our element!
el.addClass('colorme');
}, 1000);
})($(this)); // self executing function
});
.colorme{
color:red;
font-size:20px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<div id="myElement">Click me</div>
</body>
</html>
本文标签: javascriptUnderstanding proxy() in jQueryStack Overflow
版权声明:本文标题:javascript - Understanding $.proxy() in jQuery - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1736775208a1952304.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论