一、语法:
$.proxy()有两种使用语法
1)$.proxy(fn,context),fn是一个函数,context是执行fn这个函数的上下文。
例如:
![](https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif)
var obj = {name: 'Zepto'}, handler = function () { alert(this.name) }; $(document).on('click', $.proxy(handler, obj));
2)$.proxy(context, "fnName" ),请注意,此处fnName(函数名)必须是一个字符串。
![](https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif)
var obj2 = { name: 'jQuery', age: 22, showAge: function () { alert(this.age) } }; $(document).on('click', $.proxy(obj2, "showAge"));//弹出22
从上面的代码可以看出,$.proxy()主要用来改变函数执行的上下文,下面再看一个实战例子,真正把它用到好处。
二、实战例子:
需求:点击id为myElement的按钮,1000毫秒后,元素myElement增加一个class('aNewClass')。
一开始可能会有如下代码,但是我们发现无法实现我们的需求。
$('#myElement').click(function () { setTimeout(function () { $(this).addClass('aNewClass');//此时this指向window,当然无法给#myElement添加class }, 1000); });
为了修改这个this的指向,我们使用$.proxy()
$('#myElement').click(function() { setTimeout($.proxy(function() { $(this).addClass('aNewClass'); }, this), 1000);//此时this指向被点击的#myElement,看出来了吗? });