JQuery.proxy(function,context):
使用context代替function中的context。
比如:
var you = {
type: "person",
test: function(event) {
$("#log").append( this.type + " " );
}
$("#test").click(you.test);調用這句只有相當於調用:
$("#test").click(function(event){
$("#log").append( this.type + " " );
});
所以這里的this指的是$("#test").
如果這樣調用:$("#test").click($.proxy(you.test,you));
此時的調用相當於:
$("#test").click(function(event){
$("#log").append( you.type + " " );
});
雖然調用事件的對象是$("#test"),但是卻可以使用$.proxy把事件執行內的對象改變為you。
JQuery.proxy(context,functionname):
第一個參數是你想proxy的對象,第二個參數為要改變的函數的名字。
var obj = {
name: "John",
test: function() {
$("#log").append( this.name );
$("#test").unbind("click", obj.test);
}
};
$("#test").click( jQuery.proxy( obj, "test" ) ); 把obj作為context傳入test中,而不是$("#test").
這個執行完之后,結果會是John,
如果使用下面這句
$("#test").click(obj.test);
結果會是$("#test").的name值。
這個函數和上面的那個函數的功能一樣,就是使用了更加簡潔的方式。
最后附上一篇stackoverflow的一個關於Porxy的一個問答的答案。問答原地址:http://stackoverflow.com/questions/4986329/understanding-proxy-in-jquery
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 thisinside 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.