ES6 static class extends EventTarget

Question

I wish to create a class which extends EventTarget, allowing addEventListener() and dispatchEvent() to be invoked on it.

Logically, my class wants to be a singleton; if a page accidentally instantiated more than one, its functionality would break. For this reason, I've implemented the entirety of this class's logic as static fields and methods.

Unfortunately extends doesn’t seem to mesh neatly with static, so this doesn’t work:

class MyClass extends EventTarget {
   static dispatch(type) { MyClass.dispatchEvent(new Event(type)); }
}
MyClass.dispatch('hello');

Uncaught TypeError: MyClass.dispatchEvent is not a function

I also tried:

class MyClass extends EventTarget {
   static dispatch(type) { MyClass.prototype.dispatchEvent(new Event(type)); }
}
MyClass.dispatch('hello');

Uncaught TypeError: 'dispatchEvent' called on an object that does not implement interface EventTarget.

There must be something I can do with constructors and prototypes to bring EventTarget's methods directly into MyClass. Could someone enlighten me as to how I need to think through this? (Aside from the awkward hack of declaring a class static variable containing an EventTarget, and forwarding things to/from this.)

Answer 1

Logically, my class wants to be a singleton

In that case, forget about using a "static" class altogether. Simply create an object!

const MyClass = new EventTarget();

Then add your methods to that object:

MyClass.dispatch = function(type) {
  MyClass.dispatchEvent(new Event(type));
};

and you can invoke it as

MyClass.dispatch('hello');

Answer 2

Couple of issues here:

1. You are invoking dispatchEvent as if it is a static method, but it is not. You need to invoke it for an instance. And that means using this

2. The way you are trying to implement singleton is a little different. Making methods static will not ensure that no one can create multiple instances.

You can add that logic in the constructor:

class MyClass extends EventTarget {
  static #instance;

  constructor() {
    if (MyClass.#instance) {
     //Use either this           
     //throw Error("Only one instance of MyClass can be created"); 
      return MyClass.#instance; //or this
    }
    super();
    MyClass.#instance = this;
  }

  dispatch(type) {
    console.log("dispatching event",type);
    this.dispatchEvent(new Event(type));
  }
}

// Usage
const singletonInstance = new MyClass();

singletonInstance.dispatch('event 1');

singletonInstance.dispatch('event 2');

const doubletonInstance = new MyClass(); // === singletonInstance

Tip: If you are using modules, then there is no need for this. Just never export your class and only export the object.

Link