JavaScript类语法下动态调用成员方法报错，求解决方案

你遇到的这个错误核心原因是jQuery Ajax回调函数里的this上下文发生了改变——它不再指向你的类实例，而是指向了Ajax请求的配置对象，所以自然找不到类里定义的方法。下面给你几种靠谱的解决办法：

方法1：在Ajax调用前保存this到变量 #

这是最直观也最常用的方式，在进入Ajax调用前，把当前类实例的this赋值给一个变量（比如self或者that），然后在回调里用这个变量来访问类方法：

class myObj2 extends myObj1 {
  constructor(){
    super();
    // 初始化操作
  }
  method1(params){
    // 先把当前类实例的this存下来
    const self = this;
    $.ajax({
      method: 'post',
      url: url,
      data: data,
      dataType: 'json'
    }).done(function(r){
      // 用self代替this，就能正确指向类实例了
      self[r.method](r.params);
    });
  }
  method2(params){ /* 执行操作1 */ }
  method3(params){ /* 执行操作2 */ }
}

方法2：使用箭头函数绑定上下文 #

箭头函数不会创建自己的this，它会继承外层作用域的this，所以直接把回调改成箭头函数就能解决问题：

class myObj2 extends myObj1 {
  constructor(){
    super();
    // 初始化操作
  }
  method1(params){
    $.ajax({
      method: 'post',
      url: url,
      data: data,
      dataType: 'json'
    }).done((r) => {
      // 箭头函数里的this直接指向类实例
      this[r.method](r.params);
    });
  }
  method2(params){ /* 执行操作1 */ }
  method3(params){ /* 执行操作2 */ }
}

方法3：用bind()强制绑定this #

你也可以通过bind()方法把回调函数的this强制绑定到类实例上：

class myObj2 extends myObj1 {
  constructor(){
    super();
    // 初始化操作
  }
  method1(params){
    $.ajax({
      method: 'post',
      url: url,
      data: data,
      dataType: 'json'
    }).done(function(r){
      this[r.method](r.params);
    }.bind(this)); // 绑定this到类实例
  }
  method2(params){ /* 执行操作1 */ }
  method3(params){ /* 执行操作2 */ }
}

需要注意的是，你之前在构造函数里存self没用，因为构造函数里的self是在类实例初始化时的上下文，但Ajax回调是异步执行的，当回调触发时，构造函数里的self没有被正确捕获到回调的作用域里，所以不会生效——必须在method1内部（Ajax调用前）保存this，才能确保作用域正确。

内容的提问来源于stack exchange，提问作者Pablo Villalba