Tengo una clase y confío en que la palabra clave "esto" mantenga su contexto de clase. Sin embargo, cuando uso un controlador de eventos dentro de la clase, "este" contexto cambia al evento. Sé que puedo eventFunction(){}.bind(this) , pero también necesito el contexto 'this' del evento.
Pensé en la siguiente solución "Asignar la clase 'esto' como una variable predeterminada"; parece funcionar, pero no estoy seguro de que este sea el enfoque correcto:
class A_Test { constructor(a, b) { this.selector = '.foam_types'; } bind_foam_type_radios() { $(this.selector).on({ mouseenter: this.showFoamTypeExample, mouseleave: this.hideFoamTypeExample, click: this.selectFoamType, }, '.foam_type_option'); } showFoamTypeExample(e, el = this) // <-- el is being assigned the Class' "THIS" { console.log(this); // Event's "this" console.log(el); // Class' "this" } } var TheTest = A_Test(); TheTest.bind_foam_type_radios();En el caso de que se utilice un método de instancia (propio o prototipo) como controlador de eventos sin this bind explícita, se debe implementar una función de controlador como flecha para acceder directamente a this contexto (adjunto) del tiempo de creación de instancias.
class A_Test { constructor(a, b) { this.selector = '.foam-types'; } registerFoamTypeRadios() { $(this.selector).on('click', '[name="foam-type"]', this.selectFoamType); // mouseenter: this.showFoamTypeExample, // mouseleave: this.hideFoamTypeExample, } selectFoamType = (evt) => { const elm = evt.currentTarget; const srcElm = evt.target; console.log({ this: this, className: this.constructor.name, elm, srcElm }); } showFoamTypeExample = (evt) => {} hideFoamTypeExample = (evt) => {} } var theTest = new A_Test(); theTest.registerFoamTypeRadios(); * { margin: 0; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <fieldset class="foam-types"> <legend>Foam Types</legend> <label class="foam-type-option"> <input type="radio" name="foam-type" value="expanding"/> <span>Expanding Foam</span> </label> <label class="foam-type-option"> <input type="radio" name="foam-type" value="shaving"/> <span>Shaving Foam</span> </label> </fieldset>