如何修改继承自内置Array的自定义类在浏览器控制台的打印类名

底层逻辑说明 #

火狐等现代浏览器控制台对自定义类实例的类型展示前缀，不会读取普通的toString方法返回值，会优先读取实例的Symbol.toStringTag属性作为自定义类型标签。你之前修改Vector.constructor.prototype.toString的操作完全无效：Vector.constructor本质是内置的Function构造器，修改它的原型方法会污染全局所有函数的toString逻辑，和Vector实例的控制台展示规则没有关联。

可直接运行的代码 #

在Vector类中定义Symbol.toStringTag getter即可：

class Vector extends Array {
  constructor(array) {
    super(...array);
  }
  // 新增以下代码
  get [Symbol.toStringTag]() {
    return 'Vector';
  }
  // 其余业务代码
}

如果不想在类内部定义，也可以直接给原型赋值，效果一致：

Vector.prototype[Symbol.toStringTag] = 'Vector';

验证效果 #

实例化后在火狐控制台打印即可得到预期输出：

new Vector([1,2,3]) 
// 火狐控制台输出：Vector(3) [ 1, 2, 3 ]

Symbol.toStringTag是ES6标准定义的自定义类型标签属性，兼容所有主流现代浏览器，Chrome、Safari等其他浏览器也会遵循该规则展示自定义类的类型。

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