类方法被外部类通过箭头函数调用时，如何正确获取this？

刚好碰到过类似的场景，咱们直接说怎么解决——你的核心需求是让A.handleEvent被B调用时，this始终锚定A的实例，而不是跟着调用环境变。下面是几种靠谱的实现方式：

方案1：构造函数手动绑定this（最经典常用） #

如果handleEvent是普通类方法，直接在A的构造函数里把它的this绑定到实例上，一劳永逸：

class A {
  constructor() {
    // 手动把handleEvent的this绑定到当前A实例
    this.handleEvent = this.handleEvent.bind(this);
  }

  handleEvent() {
    console.log(this); // 这里的this必然是A的实例
  }
}

class B {
  executeCallback(callback) {
    callback(); // 不管在哪调用，callback的this已经被固定了
  }
}

const a = new A();
const b = new B();
b.executeCallback(a.handleEvent);

方案2：把类方法定义为箭头函数 #

箭头函数的this是定义时绑定的，会直接继承外层作用域的this（也就是A的实例），所以直接把handleEvent写成类字段形式的箭头函数：

class A {
  // 箭头函数作为类字段，this自动绑定到A实例
  handleEvent = () => {
    console.log(this); // 永远指向A的实例
  }
}

class B {
  executeCallback(callback) {
    callback();
  }
}

const a = new A();
const b = new B();
b.executeCallback(a.handleEvent);

注意这是ES类字段语法，现代浏览器或经过Babel编译的环境都支持，好处是不用手动写绑定代码。

方案3：传递回调时用箭头函数包裹 #

如果不想修改A的代码，也可以在给B传回调的时候，用箭头函数做一层包裹：

class A {
  handleEvent() {
    console.log(this); // 指向A的实例
  }
}

class B {
  executeCallback(callback) {
    callback();
  }
}

const a = new A();
const b = new B();
// 箭头函数捕获当前作用域的a，调用时自然指向A实例
b.executeCallback(() => a.handleEvent());

这种方式灵活，适合临时场景，但如果需要多次传递回调，代码会有点冗余。

为啥会出现这个问题？ #

简单说下原理：普通函数的this是调用时绑定的——当B直接调用callback()时，callback作为独立函数执行，this会指向全局对象（严格模式下是undefined）；如果B里是this.callback()，那this就会指向B的实例。而箭头函数没有自己的this，它会直接沿用定义时所在作用域的this，所以只要箭头函数是在A实例的作用域里定义的，this就不会跑偏。

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