jQuery中$.proxy()使用整理

$.proxy 方法接受一个已有的函数，并返回一个带特定上下文的新的函数。

1.jQuery.proxy( function, context )

function将要改变上下文语境的函数。

context函数的上下文语境(`this`)会被设置成这个 object 对象。

test=function()
{
	this.txt="This is an object property";
	$("div").click($.proxy(this.myClick,this));
};

test.prototype.myClick = function(event)
{
	alert(this.txt);
	alert(event.currentTarget.);
};

2.jQuery.proxy( context, name )

context函数的上下文语境会被设置成这个 object 对象。

name将要改变上下文语境的函数名(这个函数必须是前一个参数 ‘context’ 对象的属性)

这个方法通常在向一个元素上附加事件处理函数时，上下文语境实际是指向另一个对象的情况下使用。

另外，jQuery 能够确保即使你绑定的函数是经过 jQuery.proxy() 处理过的函数，你依然可以用原先的函数来正确地取消绑定。

  var objPerson = {
    name: "John Doe",
    age: 32,
    test: function(){
      $("p").after("Name: " + this.name + "<br> Age: " + this.age);
    }
  };
  $("button").click($.proxy(objPerson,"test"));

其他实例代码

$('#myElement').click(function() {

    setTimeout(function() {
        // Problem! In this function "this" is not our element!
        $(this).addClass('aNewClass');
    }, 1000);

});

这里的this就不是我们期望的那个DOM元素了，解决方法就是使用jQuery的$.proxy()了，代码如下：

$('#myElement').click(function() {

    setTimeout($.proxy(function() {
        $(this).addClass('aNewClass');  // Now "this" is again our element
    }, this), 1000);

});