JavaScript 中的 Class 无法直接继承 EventTarget，因为主流浏览器引擎未开放其内部槽位，导致 super() 报错或 dispatchEvent 失效；推荐用组合方式，即在自定义类中封装 EventTarget 实例并委托事件方法。
JavaScript 中的 Class 无法直接继承 EventTarget，因为 EventTarget 是一个**内置构造函数，且不可被子类化（在大多数浏览器中）**。虽然规范允许继承（ECMAScript 2015+ 和 DOM 规范支持），但实际中：Chrome、Firefox、Safari 目前都不支持用 class MyEmitter extends EventTarget 创建可正常工作的实例——调用 dispatchEvent 会失败或静默忽略事件。
为什么不能直接继承 EventTarget？
尽管 EventTarget 在类型上是构造函数，但它内部依赖宿主环境实现的私有机制（如事件队列、监听器注册表）。V8、SpiderMonkey 等引擎未开放其子类化所需的内部槽位（internal slots），导致：
-
super()调用可能报错（如TypeError: Illegal constructor） - 即使构造成功，
dispatchEvent不触发监听器（监听器未被正确关联到实例） - 部分浏览器（如旧版 Safari）完全禁止继承
推荐方案：组合优于继承（使用成员变量）
最可靠、跨浏览器兼容的做法是：在自定义类中持有一个 EventTarget 实例，把事件相关操作委托给它：
class CustomEventEmitter {
#target = new EventTarget();
<p>addEventListener(...args) {
this.#target.addEventListener(...args);
}</p><p>removeEventListener(...args) {
this.#target.removeEventListener(...args);
}</p><p>dispatchEvent(event) {
return this.#target.dispatchEvent(event);
}</p><p>// 可选：封装常用事件派发
emit(type, detail = {}) {
const event = new CustomEvent(type, { detail, bubbles: false, cancelable: false });
return this.dispatchEvent(event);
}
}用法示例：
立即学习“Java免费学习笔记（深入）”；
const emitter = new CustomEventEmitter();
<p>emitter.addEventListener('data-ready', (e) => {
console.log('Received:', e.detail.payload);
});</p><p>emitter.emit('data-ready', { payload: 'hello' }); // ✅ 正常触发进阶：模拟 EventTarget 接口（轻量无依赖）
如果想完全控制行为或避免创建真实 EventTarget 实例（例如在 Node.js 环境或极简场景），可手动实现核心方法：
class SimpleEventEmitter {
#listeners = new Map();
<p>addEventListener(type, callback, options = {}) {
if (!this.#listeners.has(type)) {
this.#listeners.set(type, []);
}
this.#listeners.get(type).push({ callback, options });
}</p><p>removeEventListener(type, callback) {
const list = this.#listeners.get(type);
if (list) {
const index = list.findIndex(l => l.callback === callback);
if (index !== -1) list.splice(index, 1);
}
}</p><p>dispatchEvent(event) {
const type = event.type;
const listeners = this.#listeners.get(type) || [];
for (const { callback } of listeners) {
callback.call(null, event);
}
return !event.defaultPrevented;
}
}注意：此实现不支持 once、signal、bubbles、composed 等高级特性，仅适用于简单通知场景。
补充说明：未来兼容性与 Polyfill
目前（2024 年），class extends EventTarget 仍属实验性支持：
- Chrome Canary / Edge Dev 版本中已初步支持，但需开启 flag 或仅限特定上下文
- 无稳定版浏览器默认启用；MDN 明确标注“不推荐用于生产”
- 若坚持使用继承，必须搭配运行时检测 + 降级逻辑，例如：
try {
class SafeEmitter extends EventTarget { /* ... */ }
// ✅ 继承可用
} catch {
// ❌ 回退到组合方案
}但该方式增加复杂度，收益有限。
