【轉】Js中 scope和createDelegate()

關於JavaScript中this的使用，這是一個由來已久的問題了。

我們這裏就不介紹它的發展歷史了，只結合具體的例子，告訴大家可能會遇到什麼問題，在遇到這些問題時EXT是如何解決的。

在使用EXT時，最常碰到的就是使用Ajax回調函數時出現的問題，如下面的代碼所示:

<input type="text" name="text" id="text"> 

<input type="button" name="button" id="button" value="button">

 

現在的HTML 頁面中有一個text輸入框和一個按鈕。我們希望按下這個按鈕之後，能用Ajax去後臺讀取數據，然後把後臺響應的數據放到text中，實現過程如下:

var proxy = new Ext.data.HttpProxy({url:'xxx.jsp'});                 

 

後臺需要返回EXT所需要的JSON格式的數據，下面的內容就是後臺使用JSP的一個範例，如下面的代碼所示。

function doSuccess(response) {       

     text.dom.value = response.responseText;   

}       

 
Ext.onReady(function(){
 
    Ext.get('button').on('click', function(){
        var text = Ext.get('text');
        Ext.lib.Ajax.request(
            'POST',
            '08.txt',
            {success:doSuccess},
            'param=' + encodeURIComponent(text.dom.value)
        );
    });
});               

 
在上面的代碼中，Ajax已經用Ext.get('text')獲得了text，以爲後面可以直接使用，沒想到回調函數success不會按照你寫的順序去執行。
當然，也不會像你所想的那樣使用局部變量text。

實際上，如果什麼都不做，僅僅只是使用回調函數，你不得不再次使用Ext.get('text')重新獲得元素，否則瀏覽器就會報text未定義的錯誤。

在此使用Ext.get('text')重新獲取對象還比較簡單，在有些情況下不容易獲得需要處理的對象，
我們要在發送Ajax請求之前獲取回調函數中需要操作的對象，有兩種方法可供選擇：scope和createDelegate。

 

 1. 爲Ajax設置scope

function doSuccess(response) {     
      this.dom.value = response.responseText;
  }
  Ext.lib.Ajax.request(
      'POST',
      '08.txt',
      {success:doSuccess,scope:text},
      'param=' + encodeURIComponent(text.dom.value)
  );  

  
在Ajax的callback參數部分添加一個scope:text，把回調函數的scope指向text，它的作用就是把doSuccess函數裏的this指向text對象。
然後再把doSuccess裏改成this.dom. value，這樣就可以了。
如果想再次在回調函數裏用某個對象，必須配上scope，這樣就能在回調函數中使用this對它進行操作了。

 

2. 爲success添加createDelegate()。

function doSuccess(response) {   
      this.dom.value = response.responseText;
  }
 
  Ext.lib.Ajax.request(
      'POST',
      '08.txt',
      {success:doSuccess.createDelegate(text)},
      'param=' + encodeURIComponent(text.dom.value)
  );

 
createDelegate只能在function上調用，它把函數裏的this強行指向我們需要的對象，
然後我們就可以在回調函數doSuccess裏直接通過this來引用createDelegate()中指定的這個對象了。
它可以作爲解決this問題的一個備選方案。

如果讓我選擇，我會盡量選擇scope，因爲createDelegate是要對原來的函數進行封裝，重新生成function對象。
簡單環境下，scope就夠用了，倒是createDelegate還有其他功能，比如修改調用參數等。

 

本文來自CSDN博客，轉載請標明出處：http://blog.csdn.net/liu78778/archive/2010/01/30/5271875.aspx