Question

我正在编写一个通过AJAX获取HTML文档的Javascript应用程序，然后需要处理它以将事件侦听器（特别是Bootstrap popovers）附加到其中的元素。我很难附加听众，我认为这是一个范围问题。这是相关的代码：

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); }});

...

问题（我认为）是func()中的this.load来电。如果我传递它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

这样的事情：

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);
    ...

Answer 3

这指的是此刻使用它的上下文。所以，当你this.process时，它会定位到窗口。如果您执行App.load(data, App.process)，那么它将定位App对象中的流程函数。

对象中的Javascript回调

3 个答案: