JavaScript派生类实例控制台显示父类名，如何使其显示自身类名？

• 声明普通类时，控制台日志能正确显示实例的类名：

  class A { constructor() {} }
  new A();
  // 控制台输出：A {}
  

• 声明继承EventTarget的派生类时，控制台日志却显示父类EventTarget的名称：

  class B extends EventTarget { constructor() { super(); } }
  new B();
  // 控制台输出：EventTarget {}
  

该问题在Chrome、Firefox等各类新老浏览器中均会出现。

这是因为EventTarget属于浏览器宿主内置对象，控制台对这类对象的实例显示逻辑有特殊处理，需要通过Symbol.toStringTag属性指定控制台显示的类名，有两种实现方式：

方式一：定义静态的Symbol.toStringTag属性 #

在类中添加静态的Symbol.toStringTag getter，返回当前类名：

class B extends EventTarget {
  static get [Symbol.toStringTag]() {
    return 'B';
  }
  constructor() {
    super();
  }
}
new B();
// 控制台输出：B {}

方式二：在实例上设置Symbol.toStringTag属性 #

在构造函数中为实例添加Symbol.toStringTag属性，赋值为当前类名：

class B extends EventTarget {
  constructor() {
    super();
    this[Symbol.toStringTag] = 'B';
  }
}
new B();
// 控制台输出：B {}

内容的提问来源于stack exchange，提问作者personal_cloud