ES6：如何从回调函数中调用类的方法

嘿，我之前也踩过一模一样的坑！这种回调嵌套里的this指向问题真的很容易绕晕人，咱们来一步步捋清楚问题出在哪，以及怎么解决。

首先，核心问题是：你在AJAX的回调函数里绑定点击事件，而每一层回调的this指向都可能不一样——AJAX回调的this默认是AJAX请求对象（比如原生XHR实例或者jQuery的jqXHR对象），点击事件的回调this默认是触发事件的DOM元素，这俩都不是你的类实例，所以直接调用this.classFn()肯定会报错。

你说已经试过绑定this、self=this、箭头函数，但没成功，大概率是某一层回调的this没处理对，下面给你几种靠谱的解决方案，对应不同的场景：

方案1：用箭头函数贯穿所有回调 #

箭头函数会继承外层作用域的this，只要最外层的this是类实例，内层所有箭头函数的this都会指向类实例：

class MyClass {
  constructor() {
    this.init();
  }
  
  init() {
    // 原生AJAX示例
    const xhr = new XMLHttpRequest();
    xhr.open('GET', '/your-api-url');
    // 这里用箭头函数，this指向类实例
    xhr.onload = () => {
      // 确保DOM元素已经存在（AJAX返回后渲染的元素）
      const targetBtn = document.querySelector('.your-btn');
      // 点击回调也用箭头函数，this依然指向类实例
      targetBtn.addEventListener('click', () => {
        this.classFn(); // 成功调用类方法！
      });
    };
    xhr.send();
  }
  
  classFn() {
    console.log('终于调用到classFn啦！');
  }
}

方案2：提前保存类实例引用（self=this） #

如果你习惯用普通函数回调，可以在init方法开头就把类实例的引用存起来，之后所有回调里都用这个变量调用方法：

class MyClass {
  constructor() {
    this.init();
  }
  
  init() {
    const self = this; // 保存类实例的引用，固定指向当前实例
    const xhr = new XMLHttpRequest();
    xhr.open('GET', '/your-api-url');
    xhr.onload = function() {
      const targetBtn = document.querySelector('.your-btn');
      targetBtn.addEventListener('click', function() {
        self.classFn(); // 用self代替this，避免指向混乱
      });
    };
    xhr.send();
  }
  
  classFn() {
    console.log('调用成功！');
  }
}

方案3：用bind()手动绑定this #

如果某一层必须用普通函数（比如需要访问回调本身的this，比如点击事件里的DOM元素），可以用bind()把类实例绑定到点击回调上：

class MyClass {
  constructor() {
    this.init();
  }
  
  init() {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', '/your-api-url');
    // 这里用箭头函数确保AJAX回调的this是类实例
    xhr.onload = () => {
      const targetBtn = document.querySelector('.your-btn');
      // 用bind把类实例绑定到点击回调上，同时还能在回调里用event.target访问DOM元素
      targetBtn.addEventListener('click', function(event) {
        console.log('当前点击的按钮：', event.target);
        this.classFn(); // 现在正确调用类方法
      }.bind(this)); // 把类实例绑定到这个点击回调上
    };
    xhr.send();
  }
  
  classFn() {
    console.log('调用成功！');
  }
}

额外提醒：确保DOM元素存在 #

还有一种可能：AJAX返回后，你要绑定点击事件的DOM元素还没被渲染到页面上（比如你用AJAX返回的数据动态生成元素，但还没插入DOM），这时候querySelector找不到元素，绑定事件自然无效。可以检查一下：在绑定事件前，打印一下你获取的DOM元素，看看是不是null。

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