如何在不使用 `bind` 的情况下从事件处理程序中访问 class 实例的 `this` 上下文？

Question

我有一个 class 并且我依靠“this”关键字维护它的 class 上下文。但是，当我在 class 中使用事件处理程序时，“this”上下文更改为事件。我知道我可以 eventFunction(){}.bind(this)，但我还需要事件的 'this' 上下文。

我想到了以下解决方案“将 class 'this' 分配为默认变量”；它似乎有效，但我不确定这是正确的方法：

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();

Answer 1

如果实例方法（自己的或原型的）在没有显式 this binding one has to implement such a handler as arrow function 的情况下用作事件处理程序，以便直接访问实例化时间的（封闭的）this 上下文.

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>

如何在不使用 `bind` 的情况下从事件处理程序中访问 class 实例的 `this` 上下文？

How does one access a class instance's `this` context from within an event handler without using `bind`?

javascript

event-handling

dom-events

this

es6-class