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