Tengo una clase de JavaScript que ejecuta código cuando se produce un clic. Para hacer que ese código sea extensible, lo puse en un método handleClick() separado.
Sin embargo, eso no funciona de manera ideal porque no puedo acceder a las propiedades de la instancia de clase a través de this . En el fragmento a continuación, this.bar no está undefined cuando se handleClick() .
class Foo { constructor() { this.bar = 42; window.addEventListener("click", this.handleClick); } handleClick() { console.log("doing something", this.bar); } } new Foo();¿Cómo arreglar esto?
Para evitar el problema undefined , cree una nueva propiedad que contenga una versión enlazada de la función del controlador de eventos usando Function.prototype.bind() y utilícela como detector de eventos. En el fragmento a continuación, esa es la propiedad handleClickFn :
class Foo { constructor() { this.bar = 42; window.addEventListener("click", this.handleClickFn); } handleClickFn = this.handleClick.bind(this); handleClick() { console.log("doing something", this.bar); } } new Foo();Ahora la clase se puede extender y todo funciona como se esperaba:
class Foo { constructor() { this.bar = 42; window.addEventListener("click", this.handleClickFn); } handleClickFn = this.handleClick.bind(this); handleClick() { console.log("doing something", this.bar); } } class FooChild extends Foo { handleClick() { console.log("doing something else", this.bar); } } new FooChild(); Otro enfoque es vincular el oyente a la instancia de clase en sí misma ( this ) e implementar el método especial handleEvent() que el navegador llama automáticamente, como se describe en los documentos de MDN para addEventListener() :
class Foo { constructor() { this.bar = 42; window.addEventListener("click", this); } handleEvent(e) { if (e.type === "click") { this.handleClick(); } } handleClick() { console.log("doing something", this.bar); } } class FooChild extends Foo { handleClick() { console.log("doing something else", this.bar); } } new FooChild();