Javascript覆盖类方法

Question

I'm trying to use a class from a library but want to override one of its methods. This is how the class is defined:

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

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

I want to override the submitHandler function and so this is what i did:

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

However, it's still calling the old function. What am i doing wrong?

Answer 1

A class constructor must not call (or, in this case, bind) on overridable method (see also here ). It probably shouldn't even install event listeners - that's not the job of a constructor. But if you still want to do it, don't use class fields but method declarations:

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')
  }
}