TypeScript中Ajax成功回调调用方法报错：this.fnName is not a function求助

你碰到了TypeScript开发里非常常见的上下文绑定问题——在Ajax的成功回调函数deleteTheseSuccess里，this的指向已经不是你的类实例了，所以调用this.refreshPrintQueueGrid()才会抛出TypeError: this.refreshPrintQueueGrid is not a function的错误。

问题根源 #

当Ajax回调（比如success方法）执行时，JavaScript默认会把this绑定到全局对象（浏览器环境下就是window），而不是定义deleteTheseSuccess的那个类实例。这就导致你在回调里调用this.refreshPrintQueueGrid()时，实际上是在window对象上找这个方法，自然找不到。

几种可行的解决方案 #

1. 使用箭头函数定义回调（最推荐的TypeScript写法）

箭头函数不会创建自己的this上下文，而是继承外层作用域的this。如果是直接在Ajax配置里写success回调，可以改成箭头函数：

// 假设你是这样发起Ajax请求的
$.ajax({
  url: "/your-api-endpoint",
  method: "DELETE",
  // 用箭头函数作为success回调
  success: (data) => {
    new Fe.Upsm.Head().showGlobalNotification("Selected Items Deleted");
    this.refreshPrintQueueGrid(); // 这里的this就是类实例了
    (window as any).parent.refreshOperatorPrintQueueCount();
  }
});

如果deleteTheseSuccess是单独定义的方法，也可以把它改成箭头函数属性（类里的写法）：

class YourClass {
  // 把方法改成箭头函数属性，确保this始终指向类实例
  deleteTheseSuccess = (data) => {
    new Fe.Upsm.Head().showGlobalNotification("Selected Items Deleted");
    this.refreshPrintQueueGrid();
    (window as any).parent.refreshOperatorPrintQueueCount();
  }

  refreshPrintQueueGrid() {
    $("#PrintQueueGrid").data("kendoGrid").dataSource.read();
    this.refreshPrintQueueS... // 你的后续逻辑
  }
}

2. 用bind()绑定上下文

在给Ajax指定success回调时，通过bind()把类实例的this绑定到回调函数上：

// 发起Ajax请求时绑定this
$.ajax({
  url: "/your-api-endpoint",
  method: "DELETE",
  success: this.deleteTheseSuccess.bind(this)
});

这样deleteTheseSuccess里的this就会始终指向你的类实例，而不是全局对象。

3. 提前保存this的引用

在发起Ajax请求前，把类实例的this存到一个变量（比如self或者that）里，然后在回调里用这个变量代替this：

// 发起请求的地方
const self = this;
$.ajax({
  url: "/your-api-endpoint",
  method: "DELETE",
  success: function(data) {
    self.deleteTheseSuccess(data); // 用self代替this
  }
});

额外验证点 #

• 确保refreshPrintQueueGrid是类的实例方法，不是静态方法（静态方法用static修饰，不能通过this调用）。
• 确认你的类已经正确实例化，没有在错误的地方调用方法。

内容的提问来源于stack exchange，提问作者Simon Price