使用TypeScript OOP开发应用时，点击按钮对话框无法打开怎么办？

核心问题：this指向丢失 #

当你把modal.openModal直接作为回调传给addEventListener时，方法内部的this并不会指向Modal类的实例，而是指向触发点击事件的button元素。这就导致this.modal变成undefined，自然无法调用showModal()。

解决方案 #

以下几种方法都能修复这个问题：

1. 用箭头函数包裹回调 #

在绑定事件时，用箭头函数包裹方法调用，确保this指向Modal实例：

button.addEventListener('click', () => modal.openModal())
closeButton.addEventListener('click', () => modal.closeModal())
button2.addEventListener('click', () => modal.addValues())

2. 用bind绑定this #

通过bind()方法把方法的this强制绑定到Modal实例：

button.addEventListener('click', modal.openModal.bind(modal))
closeButton.addEventListener('click', modal.closeModal.bind(modal))
button2.addEventListener('click', modal.addValues.bind(modal))

3. 在类构造函数中提前绑定方法 #

在Modal类的构造函数里，把方法的this绑定到实例，后续直接传递方法即可：

export default class Modal {
    modal;
    valores;
    constructor(modal: HTMLDialogElement | null, valores: Array<Obj>) {
        this.modal = modal
        this.valores = valores
        // 绑定this
        this.openModal = this.openModal.bind(this)
        this.closeModal = this.closeModal.bind(this)
        this.addValues = this.addValues.bind(this)
    }
    public openModal(): void {
        this.modal?.showModal()
    }
    // 补充closeModal方法实现
    public closeModal(): void {
        this.modal?.close()
    }
    // 补充addValues方法实现
    public addValues(): void {
        // 你的业务逻辑代码
    }
}

4. 使用类箭头函数方法 #

把类的方法定义成箭头函数，这样this在定义时就绑定到类实例：

export default class Modal {
    modal;
    valores;
    constructor(modal: HTMLDialogElement | null, valores: Array<Obj>) {
        this.modal = modal
        this.valores = valores
    }
    // 箭头函数方法，this始终指向实例
    public openModal = (): void => {
        this.modal?.showModal()
    }
    public closeModal = (): void => {
        this.modal?.close()
    }
    public addValues = (): void => {
        // 你的业务逻辑代码
    }
}

额外需要检查的点 #

• 你的Modal.ts代码不完整，openModal方法缺少闭合的}，同时closeModal和addValues方法也没有实现，这些语法错误会导致代码无法正常运行，需要补充完整。
• 确保HTML中的dialog元素存在，并且选择器（getElementById/querySelector）的目标元素id或标签正确。

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