javascript - 为什么 EventTarget 子类实例会丢失名称？

Question

当前版本的 JavaScript 将 EventTarget 实现为类而不是接口(interface)，因此您可以使用所有预期方法创建 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 作为父类(super class)，实例会丢失它们的构造函数名称吗？
我知道这没什么大不了的，我认为打印类名只是为了调试目的，但这是有原因的吗？

Answer 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]