ES6 Fat Arrow ( => ) functions can cause memory leaks when used with Event Handlers.

leak.js

class Foo {
  
  constructor(element) {
    this.element = element;
    this.setupHandlers();
  }
  
  doFoo() {}
  
  setupHandlers() {
    this.listener = () => {
      this.doFoo();
    }
    this.element.addEventListener('scroll', this.listener, true);
  }
  
  destroy() {
    this.teardownHandlers();
    this.element = null;
  }
  
  teardownHandlers() {
    this.element.removeEventListener('scroll', this.listener, true);
    // without this next line, the `Foo` instance and any other scope present within the instance
    // will leak, preventing garbage collection.
    this.listener = null;
  }
  
}

Have you tried testing this in Chrome, without transpilation? It natively supports classes and arrow functions in strict mode. I would also recommend trying it isolated from the smoke-and-mirrors project, if you haven't already. From what has been described, I believe this should be reclaimed. ¯_(ツ)_/¯

Unless of course you're holding on to a reference of instance Foo or this.listener elsewhere..clarifying, just in case 😏

Unless of course you're holding on to a reference of instance Foo or this.listener elsewhere..clarifying, just in case

I assumed I was, and spent a huge amount of time digging through the heap and my code making sure things were properly dereferenced. It's still possible, but at this point highly improbable. I will be digging more.

I have not tested without transpilation.