jqueyr proxy()
2015-06-15 11:35
661 查看
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.
使用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.
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- JavaScript演示排序算法
- jQuery Ajax 跨域调用
- jquery教程靠边站,一分钱不花让你免费学会jquery
- JQuery+Strusts1.x无刷新登录
- JQuery 初体验(建议学习jquery)
- Jquery实现的table最后一行添加样式的代码
- jQuery 练习[一] 学习jquery的准备工作
- jquery获得页面元素的坐标值实现思路及代码
- jquery如何实现在加载完iframe的内容后再进行操作
- jquery $.ajax()取xml数据的小问题解决方法
- jQuery '行 4954 错误: 不支持该属性或方法' 的问题解决方法
- Jquery 表单取值赋值的一些基本操作
- jQuery中的常用事件总结
- 23个超流行的jQuery相册插件整理分享
- 影响jQuery使用的14个方面
- jQuery 仿百度输入标签插件附效果图
- jQuery学习笔记之jQuery的动画
- jquery通过closest选择器修改上级元素的方法
- 再次分享18个非常棒的jQuery表格插件