React中类普通方法this指向异常，仅箭头函数可用的原因

1. 普通函数的this绑定规则 #

普通函数作为类方法时，this的指向由调用该方法的上下文决定，不会固定绑定到类实例。在React代码中，如果你把普通函数版的createBasket作为回调传递（比如传给子组件、或在useEffect/事件处理中调用），调用时的上下文可能变成undefined（严格模式下），自然无法通过this.#basketUrl访问私有字段。

而在线编译器里通常是直接通过类实例调用方法（比如new BasketService().createBasket()），此时this指向实例，所以能正常读取私有字段。

2. 箭头函数的this绑定特性 #

箭头函数没有独立的this，它会继承定义时所在上下文的this。在类字段中定义箭头函数版的createBasket时，它的this会固定绑定到当前类的实例，不管后续怎么传递调用，this都不会丢失，因此能正常访问#basketUrl。

3. React场景下的具体影响 #

在React组件中，类方法（普通函数）若未提前绑定this，当作为props传递、或在异步操作（比如API回调）中调用时，this指向会被改变。举个例子：

// 组件中使用BasketService
const service = new BasketService();
// 直接传递方法作为回调，调用时this丢失
useEffect(() => {
  someAsyncOperation().then(service.createBasket);
}, []);

这种场景下，createBasket被当作回调函数执行，this不再指向service实例，导致this.#basketUrl报错。而箭头函数版本因提前绑定了实例this，不会出现这个问题。

普通函数版的修复方案 #

如果想继续使用普通函数版，可通过以下方式确保this绑定：

• 在类构造函数中绑定this：

class BasketService {
  #basketUrl = ServerPaths.BASKETS;

  constructor() {
    this.createBasket = this.createBasket.bind(this);
  }

  async createBasket() {
    console.log(this.#basketUrl);
  }
}

• 调用时通过箭头函数或bind绑定上下文：

useEffect(() => {
  someAsyncOperation().then(() => service.createBasket());
}, []);
// 或者
someAsyncOperation().then(service.createBasket.bind(service));

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