如何在AJAX请求的URL参数与回调中优雅访问this上下文？

刚好之前也碰到过类似的场景，给你梳理下最靠谱、能通过代码评审的解决方案：

首先得明确一个关键点：context: this 这个配置只对AJAX的回调函数（比如success、error、complete这些）生效，在配置对象的url属性里直接写this的话，它指向的是当前的AJAX配置对象本身，不是你想要的外部上下文——所以你之前的疑惑完全正确，这个配置帮不到URL参数的部分。

下面两种方法是目前最简洁且符合现代JS规范的：

方法1：提前解构需要的变量（首推，可读性拉满） #

既然你要在URL里用到this上的变量，不如先把它解构出来，这样不管是URL还是回调里都能直接用，完全不用纠结上下文的问题：

// 假设你需要的变量是searchKeyword，从this里解构出来
const { searchKeyword } = this;

$.ajax({
  url: `/search/${searchKeyword}`,
  success: (response) => {
    // 箭头函数会自动继承外部的this，直接用就行
    this.updateResults(response);
  }
});

这种写法清晰明了，代码评审的时候绝对不会被挑刺——它明确展示了你用到的变量，没有任何上下文歧义。

方法2：箭头函数处理回调，URL直接用外部this #

如果不想提前解构，也可以直接在URL里用外部的this（因为配置对象是在外部上下文里创建的，所以这里的this就是你想要的外部对象），然后回调用箭头函数继承this：

$.ajax({
  url: `/search/${this.searchKeyword}`,
  success: (response) => {
    this.updateResults(response);
  }
});

这里要划重点：配置对象的url属性是在外部上下文执行的，所以这里的this就是你绑定的外部对象；而箭头函数的回调因为没有自己的this，会向上继承外部的this，完美解决两个地方的上下文需求。

为啥之前的var _that = this没通过评审？ #

大概率是因为现在ES6+已经有更简洁、更直观的方式（箭头函数、解构），这种临时变量的写法显得冗余，而且不如箭头函数清晰。

补充：如果团队要求用context配置怎么办？ #

如果团队有硬性要求必须用context，那URL部分还是得提前存变量，回调里用this（因为context会把回调的this指定为你传的对象）：

const searchKeyword = this.searchKeyword;

$.ajax({
  url: `/search/${searchKeyword}`,
  context: this,
  success: function(response) {
    // 这里的this就是你传的context对象
    this.updateResults(response);
  }
});

但这种写法不如前两种简洁，所以还是优先推荐前两种箭头函数或解构的方式。

内容的提问来源于stack exchange，提问作者John Lippson