React 18文档中“JavaScript类方法默认未绑定”表述存疑？

先明确：我讨论的不是React旧版本，也和2017年Stack Overflow上的《Reactjs: In JavaScript, class methods are not bound by default》问题无关。

在React 18文档的《Handling events》章节里，针对示例代码有这么一段表述：

In JavaScript, class methods are not bound by default。若未绑定this.handleClick就传递给onClick，函数实际调用时this会是undefined。

我觉得这个表述在技术上容易造成误解，看我下面的示例代码：

class component2 {
  prop = 3;
  foo() {
    console.log(this.prop);
  }
}
var obj = new component2();
obj.foo();

<button id="one">Print prop</button>

这段代码里我没手动绑定this，但运行时能正常输出3，看起来和文档说法矛盾？其实问题出在函数的调用方式：

• 我写的obj.foo()是直接通过实例对象调用方法，此时this会自动指向实例obj，所以能正常访问prop。
• 但在React里，如果你把this.handleClick直接传给onClick，本质是把这个函数的引用单独传递了——当事件触发时，浏览器是直接调用这个函数（相当于const fn = this.handleClick; fn()），这种情况下函数的this就会丢失（严格模式下是undefined），这才是文档要表达的场景。

文档的核心结论没错，但没明确区分“直接通过实例调用”和“单独传递函数引用后调用”这两种情况，才会让人产生疑惑。

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