TYPO3 Core

In general, we should use variant 2, unless we want to use a method as a event callback, then variant 1 is necessary. The reason is, that each variant has a different binding of this.

Variant 1¶

this is bound to the class instance. The event target is still accessible via e.target or e.currentTarget, where e is the Event object being passed to the callback.

Example:

class Foo {
  constructor() {
    $(document).on('click', 'a', this.blockAll);
  }

  private blockAll = (e: JQueryEventObject): void => {
    // this instanceof Foo
    e.target.preventDefault();
  }

Variant 2¶

this is either bound to the class instance or the event delegate. In case of an event delegate, accessing this in class context isn't possible anymore.

I would refrain from using arrow functions (var 2) as first citizens in a class.

If you need a method in an event handler simply introduce a local arrow function to avoid the this binding.

class Foo {
  constructor() {
    $(document).on('click', 'a', () => this.blockAll());
  }

  private blockAll(e: JQueryEventObject): void {
    // this instanceof Foo
    e.target.preventDefault();
  }

Markus Klein wrote:

I would refrain from using arrow functions (var 2) as first citizens in a class.

If you need a method in an event handler simply introduce a local arrow function to avoid the this binding.

[...]

You can also manual bind:

class Foo {
  constructor() {
    $(document).on('click', 'a', this.blockAll.bind(this));
  }

  private blockAll(e: JQueryEventObject): void {
    // this instanceof Foo
    e.target.preventDefault();
  }