Javascript覆盖类方法答案

【问题标题】：Javascript override class methodJavascript覆盖类方法
【发布时间】：2021-12-25 05:41:52
【问题描述】：

我正在尝试使用库中的一个类，但想覆盖其中一个方法。这就是类的定义方式：

class A {
  constructor (options) {
    this._searchForm = options.searchForm 
    this._searchForm.addEventListener('submit', this.submitHandler.bind(this))
  }

  submitHandler = (e) => {
    console.log('Default')
  }
}

我想重写 submitHandler 函数，所以我就是这样做的：

class B extends A {
  submitHandler = (e) => {
    console.log('New')
  }
}

但是，它仍在调用旧函数。我做错了什么？

【问题讨论】：

A 的构造函数在B 的构造函数之前调用，所以B 在绑定之前没有机会覆盖submitHandler。您可以尝试删除this._searchForm 上的事件处理程序并添加您自己的。 FWIW，this.submitHandler.bind(this) 是不必要的，因为 submitHandler 是一个箭头函数。
您在 A 上的绑定提交处理程序，您不会在 B 上重新绑定。但如果您不想重新绑定，您也许可以这样做。 -> addEventListener('submit', e -> this.submitHandler(e))

标签： javascript object oop bind

【解决方案1】：

类构造函数不能调用（或者，在这种情况下，绑定）可覆盖的方法（另见here）。它甚至可能不应该安装事件侦听器——这不是构造函数的工作。但是如果你仍然想这样做，不要使用类字段而是方法声明：

class A {
  constructor (options) {
    this._searchForm = options.searchForm 
    this._searchForm.addEventListener('submit', this.submitHandler.bind(this))
  }

  submitHandler(e) {
    console.log('Default')
  }
}
class B extends A {
  submitHandler(e) {
    console.log('New')
  }
}

【讨论】：

我什至从未想过 OP 正在做类字段，尽管 method = (e) => { 是一种定义方法的奇特方式。当然现在你已经指出了，很明显它是一个类字段。
该类来自一个包，所以我无法控制 A 的定义方式。
那么它要么是 a) 类不是设计为可子类化的，而是使用不同的方式来定制它，或者 b) 它是该包中的一个错误。在库存储库中提出问题。