如何在Chrome中修改JavaScript对象的控制台可见名称

其实你碰到的问题核心在于：浏览器控制台展示的对象名称，是读取该对象原型链上的constructor.name属性，但直接给obj.__proto__.constructor.name赋值往往没效果——因为默认情况下，自定义构造函数的name属性是不可写的，非严格模式下会静默失败，严格模式里直接抛错。下面给你几个靠谱的解决办法：

1. 用Object.defineProperty强制修改构造函数的name #

这是最直接的方式，通过修改构造函数name属性的描述符，让它可写可配置：

// 先创建目标对象
const obj = new function Func() { this.x = 616 };

// 拿到原型上的构造函数
const cons = obj.__proto__.constructor;

// 修改name属性的配置并赋值
Object.defineProperty(cons, 'name', {
  value: 'MyCustomObj',
  writable: true,
  configurable: true
});

// 现在控制台打印obj，会显示 MyCustomObj {x: 616}
console.log(obj);

这个方法对自定义function构造的对象几乎都有效，除非是浏览器内置的不可修改对象。

2. 重新构建对象的原型链 #

如果第一种方法不行，你可以给对象换一个带指定名称的构造函数原型：

const obj = new function Func() { this.x = 616 };

// 定义一个新的、带目标名称的构造函数
function NewCustomName() {}
// 把新构造函数的原型指向原对象的原型，保留原有方法和属性
NewCustomName.prototype = obj.__proto__;
// 修正构造函数指向（避免原型链混乱）
NewCustomName.prototype.constructor = NewCustomName;

// 给原对象设置新的原型
Object.setPrototypeOf(obj, NewCustomName.prototype);

// 控制台现在会显示 NewCustomName {x: 616}
console.log(obj);

这种方式相当于给对象换了个“构造函数爸爸”，控制台会读取新构造函数的name。

3. 提前规划：创建对象时就指定构造函数名称 #

如果能提前控制对象的创建流程，这是最稳妥的方式，避免后续修改原型链的麻烦：

// 先定义好带名称的构造函数
function MyTargetObj(x) {
  this.x = x;
}

// 创建对象
const obj = new MyTargetObj(616);

// 控制台直接显示 MyTargetObj {x: 616}
console.log(obj);

毕竟事后修改不如事前定义来得省心。

补充：为什么直接赋值name没用？ #

JavaScript引擎在创建函数时，会自动给函数设置name属性，并且默认的属性描述符是writable: false、configurable: false（不同引擎可能略有差异）。所以直接cons.name = "xxx"在非严格模式下不会报错，但也不会生效——引擎直接忽略了这个赋值操作。必须用Object.defineProperty来修改属性描述符，才能真正改变name的值。

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