TypeScript类私有HTMLElement调用方法时为undefined的问题咨询

这是JavaScript/TypeScript中普通函数this绑定规则的典型问题：
普通类方法的this是运行时动态绑定的，指向调用该函数的主体。你直接将cls.createRect作为参数传给addEventListener时，相当于把函数本身的引用传递给了事件回调，点击事件触发时，浏览器会将回调的this绑定到触发事件的DOM元素（也就是#cr对应的按钮元素），而非你的MyClass实例，按钮元素上不存在outElem属性，所以访问时得到undefined。
你在init方法中直接调用this.outElem时this指向类实例，所以可以正常访问；如果init里绑定的mouseDown/mouseUp等也是普通类方法，触发时也会出现同样的this丢失问题。

箭头函数没有独立的this绑定，它的this继承自定义时所在词法作用域的this。你将createRect改为类的箭头函数属性后，该函数的this会在类实例化时就永久绑定到当前实例，无论后续以什么方式调用（包括作为回调传递），this都指向实例对象，因此可以正常访问outElem属性。

两种写法适用不同场景：

• 如果方法需要作为回调传递（事件绑定、定时器回调、异步任务回调等场景），可以用箭头函数写法，省去手动绑定this的步骤
• 如果方法仅通过实例.方法()的形式直接调用，建议用普通类方法写法：普通方法定义在类的原型对象上，所有实例共享同一份方法，能节省内存开销；而箭头函数写法会在每个实例上单独创建一份方法副本，实例数量多时会产生不必要的内存占用。
  除了箭头函数，你也可以通过bind手动绑定this解决问题，写法如下：

rBtn?.addEventListener("click", cls.createRect.bind(cls), false)

• 编写类方法前先明确调用场景，选择合适的this绑定方案，不要盲目全用箭头函数
• 访问DOM元素时尽量避免直接用非空断言!，可以补充空值判断抛出明确错误，方便后续排查问题，示例：

const elem = document.querySelector(this.outSelector);
if (!elem) throw new Error(`未找到选择器${this.outSelector}对应的DOM元素`);
this.outElem = elem;

• 事件绑定后记得在合适的时机（比如组件/实例销毁时）解绑事件监听器，避免内存泄漏
• 尽量不要用any类型绕过类型校验，遇到类型报错优先补充正确的类型定义，能大幅减少运行时低级错误
• 注意代码大小写敏感，你的调用示例中new MYClass('#pv')的类名MYClass和定义的MyClass大小写不一致，会导致编译报错

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