JavaScript设置类私有属性#mouse时报Cannot read private member错误如何解决？

报错原因 #

1. 最初版本的错误源于私有字段名称不匹配：你声明的私有字段是#property，但mouseDownEvent方法内直接访问了未声明的#mouse，触发访问不存在私有成员的报错。
2. 修正属性名后仍然报错的核心是this指向异常：
   • JavaScript中类普通方法的this是运行时动态绑定的，如果你将mouseDownEvent直接作为事件回调传递（例如作为DOM事件的回调函数），方法触发时this会被绑定到事件触发对象（比如DOM节点），而非Testing类的实例。
   • JS私有字段仅允许在类内部、且this指向本类合法实例时访问，当this指向非本类实例时，就会抛出你遇到的类型错误。

解决方案 #

可选方案任选其一即可：

• 方案1：在构造函数中绑定方法的this指向
  在构造函数内提前把mouseDownEvent的this硬绑定到当前类实例，后续无论怎么传递回调，this都不会被重写：

  class Testing
  {
     #mouse;
     constructor()
     {
        this.#mouse = new Vector2();
        // 新增绑定逻辑
        this.mouseDownEvent = this.mouseDownEvent.bind(this);
     }
  
     mouseDownEvent()
     {
        this.#mouse.x = somevalue;
     }
  }
  

• 方案2：将方法改写为类属性箭头函数
  箭头函数的this继承自定义时的外层作用域（也就是类实例），不会被运行时动态修改：

  class Testing
  {
     #mouse;
     constructor()
     {
        this.#mouse = new Vector2();
     }
  
     // 改为箭头函数写法
     mouseDownEvent = () => {
        this.#mouse.x = somevalue;
     }
  }
  

• 方案3：绑定回调时用箭头函数包裹
  传递回调时不直接传递方法引用，而是在外层套一层箭头函数，保证调用方法时的this是类实例：

  // 绑定事件时的写法示例
  const testInstance = new Testing();
  domElement.addEventListener('mousedown', (e) => testInstance.mouseDownEvent(e));
  

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