React函数组件中Helper类this失效原因及优化方案

问题场景 #

我编写了如下Helper类，必须使用self = this才能正常调用funcA，否则会抛出TypeError: funcA is not a function：

class Helper {
  constructor() {
    self = this;
  }

  funcA = () => {
    console.log('func a');
  }

  funcB = () => {
    self.funcA();
    // this.funcA() <- Gives TypeError this.funcA is not a function. console log shows it as undefined.
  }
}

export default Helper;

在React函数组件中使用方式如下：

import React, {useEffect} from 'react';
import Helper from './helper';

const Component = () => {
  useEffect(() => {
    const helper = new Helper();
    helper.funcB();
  }, []);
};

export default Component;

实际问题源于setTimeout导致的this上下文丢失，报错示例如下：

class Helper {
  funcA = () => {
    console.log('func a');
  }

  doTick = () => {
    this.funcA();  // Gives TypeError this.funcA is not a function
  }

  funcB = () => {    
    setTimeout(this.doTick, 1000);
  }
}

export default Helper;

我不解为何需要使用self，且希望保留Vanilla JS类实现的前提下找到更简洁的方案。

原因解析 #

核心问题是**setTimeout调用传入的函数时，会丢失原有的this上下文**：

• 当你把this.doTick作为参数传给setTimeout时，函数会被当作普通函数执行，此时this指向全局对象（浏览器环境为window，严格模式下为undefined），而非Helper类的实例，因此找不到funcA方法。
• 你之前用self = this能生效，是因为未声明的self会成为全局变量，保存了实例引用，但这种写法极其危险——多个Helper实例会互相覆盖全局self的值，导致逻辑混乱。

简洁解决方案 #

不需要依赖全局self，以下两种规范方式可以解决问题：

方案1：用箭头函数包裹调用（推荐） #

箭头函数的this是定义时绑定的，会继承外层上下文的this。直接在setTimeout中用箭头函数调用doTick，就能保证this指向Helper实例：

class Helper {
  funcA = () => {
    console.log('func a');
  }

  doTick = () => {
    this.funcA();
  }

  funcB = () => {    
    setTimeout(() => this.doTick(), 1000);
  }
}

方案2：提前绑定this #

使用bind方法将doTick的this永久绑定到当前实例，再传递给setTimeout：

class Helper {
  funcA = () => {
    console.log('func a');
  }

  doTick = () => {
    this.funcA();
  }

  funcB = () => {    
    setTimeout(this.doTick.bind(this), 1000);
  }
}

另外，如果你的环境完全支持ES6类字段语法，类中定义的箭头函数（如funcA = () => {}）本身已经绑定了实例的this，理论上不会出现上下文丢失。如果仍报错，检查是否是编译环境未正确配置类字段的支持（比如Babel插件是否启用）。

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