为什么 EventTarget 子类实例会丢失名称？答案

【问题标题】：Why EventTarget subclass instances lose their names?为什么 EventTarget 子类实例会丢失名称？
【发布时间】：2020-06-07 06:03:53
【问题描述】：

当前版本的 JavaScript 将 EventTarget 实现为类而不是接口，因此您可以使用所有预期方法创建 EventTarget 实例。

我尝试在控制台中复制/粘贴EventTarget example（在 Chrome 和 Firefox 上），但是当我检查 myEventTarget 对象（即作为名为 MyEventTarget 的 EventTarget 的子类构建）时，控制台说 myEventTarget 是EventTarget，而不是 MyEventTarget。

这是代码

//this is the MDN example
class MyEventTarget extends EventTarget {
  constructor(mySecret) {
    super();
    this._secret = mySecret;
  }

  get secret() { return this._secret; }
};

let myEventTarget = new MyEventTarget(5);
let value = myEventTarget.secret;  // == 5
myEventTarget.addEventListener("foo", function(e) {
  this._secret = e.detail;
});

let event = new CustomEvent("foo", { detail: 7 });
myEventTarget.dispatchEvent(event);
let newValue = myEventTarget.secret; // == 7

// the following is the code I have added
// everything seems to work as usual, ie
console.log(myEventTarget instanceof MyEventTarget)
// the console says that is true

// but if I try to print the instance...
console.log(myEventTarget)
// EventTarget { _secret: 7 }

为什么控制台说 myEventTarget 只是一个 EventTarget？

我发现这件事很不常见，因为如果我输入以下代码，控制台会说 myEventTarget 实际上是一个 MyEventTarget 实例

class MyEventTarget extends class SomeOtherClass{} {
  constructor(mySecret) {
    super();
    this._secret = mySecret;
  }

  get secret() { return this._secret; }
};

let myEventTarget = new MyEventTarget(5);

console.log(myEventTarget instanceof MyEventTarget)
// the console diligently says that is true

// and if I try to print the instance...
console.log(myEventTarget)
// ...the console correcly says
// MyEventTarget { _secret: 5 }

所以如果我使用 EventTarget 作为超类，实例会丢失它们的构造函数名称吗？我知道这没什么大不了的，我认为打印类名只是为了调试目的，但这是有原因的吗？

【问题讨论】：

标签： javascript ecmascript-6

【解决方案1】：

发生这种情况是因为 EventTarget 覆盖了 Symbol.toStringTag 并且您继承了此行为。您可以将其覆盖为您想要的任何内容。

class MyEventTarget extends EventTarget {
  constructor(mySecret) {
    super();
    this._secret = mySecret;
  }

  get secret() { return this._secret; }
  
  get [Symbol.toStringTag]() {
    return this.constructor.name
  }
};

let myEventTarget = new MyEventTarget(5);
let value = myEventTarget.secret;  // == 5
myEventTarget.addEventListener("foo", function(e) {
  this._secret = e.detail;
});

let event = new CustomEvent("foo", { detail: 7 });
myEventTarget.dispatchEvent(event);
let newValue = myEventTarget.secret; // == 7

// the following is the code I have added
// everything seems to work as usual, ie
console.log(myEventTarget instanceof MyEventTarget)
// the console says that is true

// but if I try to print the instance...
console.log(myEventTarget)
// MyEventTarget { _secret: 7 }

console.log(Object.prototype.toString.call(myEventTarget))
// [object MyEventTarget]

【讨论】：