为什么console.log打印对象时不展示执行时刻值？两种场景输出为何不同

核心原因 #

该差异是Chrome DevTools控制台对引用类型的**懒求值（延迟求值）**特性导致的。

差异细节解释 #

• 代码片段1执行顺序：创建对象 → 给对象添加name属性 → 打印对象
  打印执行时，对象已经存在name属性，所以控制台的预览行、展开后的属性列表都会正常显示name: "John"。
• 代码片段2执行顺序：创建对象 → 打印对象 → 给对象添加name属性
  打印执行时对象是空对象，所以控制台的预览行显示{}。但Chrome控制台打印引用类型时不会立刻固化对象的所有属性快照，只会在用户点击展开对象的折叠箭头时，才会读取对象当前的实时属性值。此时name属性已经被添加完成，所以展开后能看到name: "John"，和预览行的内容不一致。

规避方法 #

如果需要打印对象当前时刻的快照，避免延迟求值带来的不一致，可以在打印时对对象做序列化再反序列化，或者做浅拷贝固化状态：

// 方法1：序列化后反序列化（适用于无特殊类型、无循环引用的普通对象深拷贝）
console.log(JSON.parse(JSON.stringify(obj1)))
// 方法2：浅拷贝（仅适用层级简单、无循环引用的对象）
console.log({...obj1})

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