使用类方法作为回调时，如何获取正确的`this`指向？

重复说明 #

• 相关问题未覆盖类中定义方法的场景。

问题描述 #

通过类定义对象时，若将对象的方法作为回调函数传递，this指针会丢失与原对象的绑定，不再指向方法所属的对象。

示例代码

class MyClass {
  bar = 'my bar';

  foo() {
    console.log(this.bar);
  }
}

function runCallback(func) {
  return func();
}

const myClass = new MyClass();

// 输出: 'my bar'（符合预期）
myClass.foo()

// 输出: 'undefined'（不符合预期）
runCallback(myClass.foo)

问题 #

如何让JavaScript在回调场景下，保证this指向方法所属的对象？

原因说明 #

JavaScript中this的绑定规则和多数编程语言不同：它的指向由函数的调用方式决定，而非定义位置。当把类方法单独提取为回调时，函数脱离了原对象的上下文，this会默认绑定到全局对象（严格模式下为undefined），因此无法访问对象的属性。

解决方案 #

以下是几种常用的解决方式：

1. 用bind显式绑定this #

bind会创建一个新函数，将this永久绑定到指定对象，无论后续如何调用，this指向都不会改变。

runCallback(myClass.foo.bind(myClass));
// 输出: 'my bar'

2. 用箭头函数包裹回调 #

箭头函数不会创建自身的this，它会继承外层作用域的this。通过箭头函数包裹原方法，可保留原对象的this绑定。

runCallback(() => myClass.foo());
// 输出: 'my bar'

3. 在类中用箭头函数定义方法 #

将类方法定义为箭头函数字段，这样方法的this会永久绑定到类实例，后续无论如何传递该方法，this都指向实例本身。

class MyClass {
  bar = 'my bar';

  foo = () => {
    console.log(this.bar);
  }
}

// 直接传递方法即可
runCallback(myClass.foo);
// 输出: 'my bar'

4. 修改回调执行逻辑，用call/apply指定this #

如果有权修改runCallback函数，可在调用传入的函数时，用call或apply显式指定this的指向：

function runCallback(func, context) {
  return func.call(context);
}

runCallback(myClass.foo, myClass);
// 输出: 'my bar'

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