在方法內使用`this`關鍵字在Ajax調用的解決方案？

我正在創建一個JavaScript類。一些方法包含使用JQuery的AJAX調用。我所面臨的問題是，由於範圍的變化，我無法在AJAX回調中使用this關鍵字。我已經提出了一個hackey解決方案，但是我想知道最佳實踐方法是什麼？在方法內使用`this`關鍵字在Ajax調用的解決方案？

下面是一個例子：

var someClass = function() { 

    var someElement = $('form'); 

    this.close = function() { 
     someElement.remove(); 
    }; 

    this.query = function() { 
     $.ajax({ 
     url: someurl, 
     success: function() { 
      this.close(); // does not work because `this` is no longer the parent class 
     } 
     }); 
    }; 
};

來源

2011-11-17 dqhendricks

這個問題經常被問到，但由於標題非常不同，所以很難找到可比較的副本。 –

在定義'this.query（）'之前設置'var that = this;'並在裏面使用'that'而不是'this'。 –

@Michael他們需要有一個更好的方式來將類似的問題鏈接在一起，而不是標記爲重複。 – puk

只需使用context參數來傳遞你想成功回調的任何對象：

$.ajax({ 
    url: someurl, 
    context: this, 
    success: function() { 
     this.close(); // this is what it was when we triggered the AJAX call 
    } 
});

你也可以通過複雜的對象和東西：

$.ajax({ 
    url: someurl, 
    context: { foo: 'bar', element: this }, 
    success: function() { 
     alert(this.foo); 
     this.element.close(); 
    } 
});

來源

2011-11-17 17:49:29

sofar我喜歡這一個最好的。沒有意識到上下文參數。謝謝！ – dqhendricks

商店參考，this - 我的慣例一直是使用self。

var someClass = function() { 

    var self = this, //<--- store a reference 
     someElement = $('form'); 

    this.close = function() { 
     someElement.remove(); 
    }; 

    this.query = function() { 
     $.ajax({ 
     url: someurl, 
     success: function() { 
      self.close(); // does not work because `this` is no longer the parent class 
     } 
     }); 
    }; 
};

來源

2011-11-17 17:48:57

我更喜歡使用匿名函數，因爲你得到局部變量，並且你不需要使用var來創建變量，我在代碼塊中間發現了笨拙的變量。

var someClass = function() { 

    var someElement = $('form'); 

    this.close = function() { 
     someElement.remove(); 
    }; 

    this.query = function() { 
     (function(self, someurl){ 
      $.ajax({ 
       url: someurl, 
       success: function() { 
       self.close(); 
       } 
      }); 
     }(this, someurl)); 
    }; 
};

在這個例子中，沒有必要包括someurl作爲參數，但是，當你想在等待迴應這將改變值的全局變量的本地副本就派上用場了。

來源

2011-11-17 19:01:33 puk

在方法內使用`this`關鍵字在Ajax調用的解決方案？

回答

相關問題