TypeScript HTML表单抽象类的this指向冲突问题求助

嘿，我完全懂你现在遇到的困惑——在TypeScript里处理DOM事件回调时，this的指向确实很容易让人头大！你当前的问题是，既要让Submit方法里的this指向表单元素（符合你定义的this: HTMLElement类型），又要能访问抽象类的成员变量，这两个需求直接冲突了，因为当你把this.Submit直接赋值给onsubmit时，回调执行时this会自动指向触发事件的DOM元素，而不是类的实例。

下面给你几种实用的解决方案，你可以根据自己的习惯选择：

方案1：用箭头函数包裹回调（最推荐） #

箭头函数不会改变this的指向，它会保留外层上下文的this（也就是你的类实例），同时我们可以通过event.target拿到触发事件的表单元素：

export abstract class AbstractForm {
  protected form: HTMLFormElement;
  constructor(form: HTMLFormElement) {
    this.form = form;
    // 箭头函数保留类实例的this
    this.form.onsubmit = (ev: Event) => {
      this.Submit(ev);
    };
  }

  // 这里的this指向类实例，可直接访问类成员
  protected Submit(ev: Event) {
    // 把event.target转为HTMLFormElement类型，方便后续操作
    const formElement = ev.target as HTMLFormElement;
    
    // 现在你既能访问类里的成员，又能拿到表单元素
    console.log("类中的form属性：", this.form);
    console.log("触发事件的表单元素：", formElement);

    // 别忘了阻止表单默认提交行为（如果需要的话）
    ev.preventDefault();
    
    // 在这里写你的自定义逻辑
  }
}

方案2：用bind绑定类实例的this #

bind方法会创建一个新函数，强制让Submit方法里的this指向类实例，同样我们可以通过event.target获取表单元素：

export abstract class AbstractForm {
  protected form: HTMLFormElement;
  constructor(form: HTMLFormElement) {
    this.form = form;
    // 绑定类实例的this到Submit方法
    this.form.onsubmit = this.Submit.bind(this);
  }

  protected Submit(ev: Event) {
    const formElement = ev.target as HTMLFormElement;
    
    console.log("类中的form属性：", this.form);
    console.log("触发事件的表单元素：", formElement);
    
    ev.preventDefault();
    // 自定义逻辑
  }
}

方案3：保存类实例引用（适合需要this指向DOM元素的场景） #

如果你确实需要Submit回调里的this直接是表单元素，同时还要访问类成员，可以在构造函数里把类实例保存为一个变量（比如self）：

export abstract class AbstractForm {
  protected form: HTMLFormElement;
  constructor(form: HTMLFormElement) {
    this.form = form;
    const self = this; // 保存类实例的引用
    // 这里的this指向表单元素，self指向类实例
    this.form.onsubmit = function(this: HTMLElement, ev: Event) {
      console.log("触发事件的表单元素：", this);
      console.log("类中的form属性：", self.form);
      
      ev.preventDefault();
      // 自定义逻辑
    };
  }
}

一般来说，方案1和方案2更符合TypeScript的类编程风格，代码可读性更高，推荐优先使用。

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