jQuery.proxy(),接受一個(gè)函數(shù)，然后返回一個(gè)新函數(shù)，并且這個(gè)新函數(shù)始終保持了特定的上下文(context )語境。

jQuery.proxy( function, context )

function將要改變上下文語境的函數(shù)。

context函數(shù)的上下文語境(`this`)會(huì)被設(shè)置成這個(gè) object 對象。

jQuery.proxy( context, name )

context函數(shù)的上下文語境會(huì)被設(shè)置成這個(gè) object 對象。

name將要改變上下文語境的函數(shù)名(這個(gè)函數(shù)必須是前一個(gè)參數(shù) ‘context' 對象的屬性)

這個(gè)方法通常在向一個(gè)元素上附加事件處理函數(shù)時(shí)，上下文語境實(shí)際是指向另一個(gè)對象的情況下使用。

另外，jQuery 能夠確保即使你綁定的函數(shù)是經(jīng)過 jQuery.proxy() 處理過的函數(shù)，你依然可以用原先的函數(shù)來正確地取消綁定。

參數(shù)：
function：Function類型需要更改上下文對象的函數(shù)。
context：任意類型指定為函數(shù)設(shè)置的上下文對象。
name：String類型需要更改上下文對象的函數(shù)名稱(它應(yīng)該是context的一個(gè)屬性)。
additionalArguments 可選/任意類型指定調(diào)用該函數(shù)時(shí)需要傳入的參數(shù)，參數(shù)可以有任意多個(gè)。

注意事項(xiàng)：
參數(shù)additionalArguments是從 jQuery 1.6 開始支持的。
該方法非常適用于在附加事件處理函數(shù)時(shí)，將事件處理函數(shù)的上下文指向另一個(gè)對象。此外，jQuery確保：即使你使用jQuery.proxy()返回的"代理"函數(shù)來綁定事件，如果你在解除綁定時(shí)傳入原函數(shù)，jQuery仍然可以正確解除綁定。
從jQuery 1.9 開始，如果context為null或undefined，則"代理"函數(shù)的上下文不會(huì)發(fā)生更改。這將允許jQuery.proxy()只傳入函數(shù)的參數(shù)，而不更改函數(shù)的上下文。

實(shí)例

我們先看個(gè)例子：

//正常的this使用
$('#Haorooms').click(function() {

  // 這個(gè)this是我們所期望的，當(dāng)前元素的this.

  $(this).addClass('aNewClass');

});
//并非所期望的this
$('#Haorooms').click(function() {

  setTimeout(function() {

     // 這個(gè)this指向的是settimeout函數(shù)內(nèi)部，而非之前的html元素

    $(this).addClass('aNewClass');

  }, 1000);

});

這時(shí)候怎么辦呢，通常的一種做法是這樣的：

$('#Haorooms').click(function() {
  var that = this;  //設(shè)置一個(gè)變量，指向這個(gè)需要的this

  setTimeout(function() {

     // 這個(gè)this指向的是settimeout函數(shù)內(nèi)部，而非之前的html元素

    $(that).addClass('aNewClass');

  }, 1000);

});

但是，在使用了jquery框架的情況下， 有一種更好的方式，就是使用$.proxy函數(shù)。

有兩種語法：

jQuery.proxy( function, context )
/**function將要改變上下文語境的函數(shù)。
** context函數(shù)的上下文語境(`this`)會(huì)被設(shè)置成這個(gè) object 對象。
**/

jQuery.proxy( context, name )
/**context函數(shù)的上下文語境會(huì)被設(shè)置成這個(gè) object 對象。
**name將要改變上下文語境的函數(shù)名(這個(gè)函數(shù)必須是前一個(gè)參數(shù) ‘context' **對象的屬性)
**/

上面的例子使用這種方式就可以修改成：

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

  setTimeout($.proxy(function() {

    $(this).addClass('aNewClass'); 

  }, this), 1000);

});

最新評(píng)論