对象内的 Javascript 回调答案

【问题标题】：Javascript callbacks within an object对象内的 Javascript 回调
【发布时间】：2012-04-11 01:25:12
【问题描述】：

我正在编写一个 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) 重新组织这个混乱以在加载后调用处理程序？

【问题讨论】：

标签： javascript jquery twitter-bootstrap jquery-events

【解决方案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();
  }
}

【讨论】：

接受了，因为它排在第一位，但也感谢 Ilia。当答案出现时，我已经这样做了，但是谢谢。听众仍然没有附加，但我认为这是 Bootstrap 的问题，而不是我的 Javascript。
啊，是的 - 我没有使用过引导程序，所以我不熟悉它的问题。祝你好运！（另外，我会赞扬@Ilia - 两分钟不是什么。）

【解决方案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);
    ...

【讨论】：

哈哈哈，我真的很喜欢你的“注意这个”评论！那太好了。此外，在最后一行（在“...”之前），您可能希望在方法调用以及您传入的引用中使用 self 而不是 this，不是吗？或者this 仍然是对象而不是window？

【解决方案3】：

this 指的是当前使用它的上下文。因此，当您执行this.process 时，它将以窗口为目标。如果您执行App.load(data, App.process)，那么它将针对App 对象中的流程函数。

【讨论】：