實(shí)例解析jQuery中proxy()函數(shù)的用法

字號(hào):


    proxy()主要用于在同樣的上下文語(yǔ)境中指向另一個(gè)對(duì)象,下面我們就以實(shí)例解析jQuery中proxy()函數(shù)的用法,需要的朋友可以參考下
    jQuery.proxy(),接受一個(gè)函數(shù),然后返回一個(gè)新函數(shù),并且這個(gè)新函數(shù)始終保持了特定的上下文(context )語(yǔ)境。
    jQuery.proxy( function, context )
    function將要改變上下文語(yǔ)境的函數(shù)。
    context函數(shù)的上下文語(yǔ)境(`this`)會(huì)被設(shè)置成這個(gè) object 對(duì)象。
    jQuery.proxy( context, name )
    context函數(shù)的上下文語(yǔ)境會(huì)被設(shè)置成這個(gè) object 對(duì)象。
    name將要改變上下文語(yǔ)境的函數(shù)名(這個(gè)函數(shù)必須是前一個(gè)參數(shù) ‘context' 對(duì)象的屬性)
    這個(gè)方法通常在向一個(gè)元素上附加事件處理函數(shù)時(shí),上下文語(yǔ)境實(shí)際是指向另一個(gè)對(duì)象的情況下使用。
    另外,jQuery 能夠確保即使你綁定的函數(shù)是經(jīng)過(guò) jQuery.proxy() 處理過(guò)的函數(shù),你依然可以用原先的函數(shù)來(lái)正確地取消綁定。
    參數(shù):
    function:Function類型需要更改上下文對(duì)象的函數(shù)。
    context:任意類型指定為函數(shù)設(shè)置的上下文對(duì)象。
    name:String類型需要更改上下文對(duì)象的函數(shù)名稱(它應(yīng)該是context的一個(gè)屬性)。
    additionalArguments 可選/任意類型指定調(diào)用該函數(shù)時(shí)需要傳入的參數(shù),參數(shù)可以有任意多個(gè)。
    注意事項(xiàng):
    參數(shù)additionalArguments是從 jQuery 1.6 開(kāi)始支持的。
    該方法非常適用于在附加事件處理函數(shù)時(shí),將事件處理函數(shù)的上下文指向另一個(gè)對(duì)象。此外,jQuery確保:即使你使用jQuery.proxy()返回的"代理"函數(shù)來(lái)綁定事件,如果你在解除綁定時(shí)傳入原函數(shù),jQuery仍然可以正確解除綁定。
    從jQuery 1.9 開(kāi)始,如果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ù)。
    有兩種語(yǔ)法:
    jQuery.proxy( function, context )
    /**function將要改變上下文語(yǔ)境的函數(shù)。
    ** context函數(shù)的上下文語(yǔ)境(`this`)會(huì)被設(shè)置成這個(gè) object 對(duì)象。
    **/
    jQuery.proxy( context, name )
    /**context函數(shù)的上下文語(yǔ)境會(huì)被設(shè)置成這個(gè) object 對(duì)象。
    **name將要改變上下文語(yǔ)境的函數(shù)名(這個(gè)函數(shù)必須是前一個(gè)參數(shù) ‘context' **對(duì)象的屬性)
    **/
    上面的例子使用這種方式就可以修改成:
    $('#Haorooms').click(function() {
      setTimeout($.proxy(function() {
        $(this).addClass('aNewClass'); 
      }, this), 1000);
    });