如何在jQuery AJAX的success回调中调用外部函数？解决this绑定问题

嘿，这个问题我太熟了——jQuery AJAX的回调函数里this的指向确实是个容易踩的坑！让我给你拆解清楚怎么解决，以及你需要做的绑定操作到底是怎么回事。

首先得明确：你在do_the_ajax里能直接用this.do_the_other_thing()，是因为此时的this指向你的类实例；但jQuery的AJAX回调（比如success）默认会把this绑定到jqXHR对象或者AJAX配置的上下文，所以直接在回调里用this.do_the_other_thing()肯定会报错。

下面给你三种最常用的解决方案，任选其一就行，不需要多次绑定操作：

1. 提前保存实例的this到变量 #

这是最经典也最直观的写法，适合所有JS环境：

do_the_ajax() {
  // 把当前类实例的this存到self变量里
  const self = this;
  $.ajax({
    url: '/your-api-endpoint',
    success: function(response) {
      // 这里用self就能访问到类实例的方法了
      self.do_the_other_thing();
      // 顺便可以处理response数据
      console.log('AJAX成功返回:', response);
    }
  });
}

原理很简单：回调函数里的this虽然变了，但我们提前把实例的引用存在self里，回调就能通过self访问到实例的所有方法和属性。

2. 使用ES6箭头函数 #

如果你的项目支持ES6+，箭头函数会更简洁——箭头函数不会创建自己的this，它会继承外层作用域（也就是do_the_ajax函数）的this：

do_the_ajax() {
  $.ajax({
    url: '/your-api-endpoint',
    success: (response) => {
      // 这里的this和do_the_ajax里的this完全一致，就是你的类实例
      this.do_the_other_thing();
      console.log('AJAX成功返回:', response);
    }
  });
}

这种写法不用额外存变量，代码更清爽，推荐在现代项目里使用。

3. 利用jQuery AJAX的context配置项 #

jQuery本身就提供了修改回调this指向的方法——在AJAX配置里设置context为你的类实例：

do_the_ajax() {
  $.ajax({
    url: '/your-api-endpoint',
    // 指定回调函数里的this为当前类实例
    context: this,
    success: function(response) {
      // 现在this就是你的类实例了，直接调用方法就行
      this.do_the_other_thing();
      console.log('AJAX成功返回:', response);
    }
  });
}

这是jQuery专属的解决方案，如果你习惯用jQuery的原生配置，这种方法也很靠谱。

关于绑定次数的说明 #

你完全不需要给do_the_other_thing做额外的bind操作！上面三种方法都是确保AJAX回调里的this指向你的类实例，只要做到这一点，就能直接调用this.do_the_other_thing()，一次绑定都不用给目标方法做——除非do_the_other_thing本身内部也有this指向问题，但根据你的描述，你在do_the_ajax里能直接调用它，说明它的this已经是正确的了。

内容的提问来源于stack exchange，提问作者Alexander Kleinhans