對象內的Javascript回調

Question

我在寫一個Javascript應用程序，它通過AJAX獲取HTML文檔，然後需要處理它以將事件偵聽器（特別是Bootstrap彈出）附加到其中的元素。我很難附加聽衆，我認爲這是一個範圍問題。下面是相關的代碼：

var App = function(site){ 

    this.load = function(data, func){ 
    $('div.ajax').html(data); 
    func(); 
    } 

    this.dispatch = function(data){ 

    if(data.indexOf('from_server') !== -1){ 
     this.load(data, this.process); 
     console.log('Loaded view from Matisse.'); 
     return true; 
    } 

    } 

    this.process = function(){ 
    this.popovers('from_server'); 
    } 

    this.popovers = function(el){ 
    var that = this; 
    $('img.artwork.gallery', el).each(function(){ 
     $(this).popover({ trigger: 'hover', content: that.popoverPopulate(this) }); 
    }); 
    } 

    this.popoverPopulate = function(el){ 
    return $(el).next('div.popover_content').html(); 
    } 
} 

var APP = new App(); 

$.ajax({blah: blah, success: function(data){ APP.dispatch(data); }}); 

... 

的問題（我認爲）是this.load的func()電話。如果我通過它this.process()，那麼它將'this'範圍限定到窗口，並且出現錯誤。如果我通過this.process，它是一個創建的lambda，它仍然失敗。如果我打電話this.func()發生同樣的問題。

我該如何a）使用回調將應用範圍保存在App對象中，或者b）重新組織這個混亂以在加載後調用處理程序？

Answer 1

我想像你想要使用的var that=this作用域招上所有的方法：

var App = function(site){ 

    var that = this; 

    this.load = function(data, func){ 
    $('div.ajax').html(data); 
    func(); 
    } 

    this.dispatch = function(data){ 

    if(data.indexOf('from_server') !== -1){ 
     that.load(data, that.process); 
     console.log('Loaded view from Matisse.'); 
     return true; 
    } 

    } 

    this.process = function(){ 
    that.popovers('from_server'); 
    } 

    this.popovers = function(el){ 
    $('img.artwork.gallery', el).each(function(){ 
     $(that).popover({ trigger: 'hover', content: that.popoverPopulate(this) }); 
    }); 
    } 

    this.popoverPopulate = function(el){ 
    return $(el).next('div.popover_content').html(); 
    } 
} 

Answer 2

這是指它是目前使用的上下文。所以當你做this.process它將會定位到窗口。如果您這樣做App.load(data, App.process)那麼它將針對App對象中的過程函數。

Answer 3

事情是這樣的：

var App = function(site){ 
    var self = this; //-<!!! 

    this.load = function(data, func){ 

    ... 

    this.dispatch = function(data){ 
     if(data.indexOf('from_server') !== -1){ 
      self.load(data, self.process); 
    ...