This is probably a straightforward question; however, I'm struggling.

What is the correct way to assign and remove an event listener, whist being abstracted to a class?

In the example, I've added the event listener using the arrow function. When the event fires, the this context reports the test instance as expected.

However, I cannot remove the event listener, which would make sense as the line -> document.removeEventListener("mouseDown",() => this.mouseDown); is effectively removing a reference to new function.

So with that, how do I assign the event to the listener, whilst maintaining a reference to function and the class instance?

class TestClass {
  constructor() {
    this.storedValue = "In class";

    document.addEventListener("mousedown", () => this.mouseDown());
  }

  test() {
    console.log(this);
  }

  mouseDown() {
    console.log(this);
    document.removeEventListener("mouseDown",() => this.mouseDown);
  }
}

test = new TestClass();

If I switch the code to:

class TestClass {
  constructor() {
    this.storedValue = "In class";

    document.addEventListener("mousedown", this.mouseDown);
  }

  test() {
    console.log(this);
  }

  mouseDown() {
    console.log(this);
    document.removeEventListener("mouseDown", this.mouseDown);
  }
}

test = new TestClass();

The this reference becomes the document rather than test.