为何Object.assign执行前，console.log输出的Vertices已含InstanceMatrix？

核心问题：Object.assign执行前的console.log怎么会有InstanceMatrix？ #

这真的是前端开发者经常踩的控制台经典小陷阱！本质原因是：浏览器控制台打印对象时，存的不是当时的“快照”，而是对象的引用。只有当你手动点开这个对象查看详情时，它才会去读取对象的最新状态。

你的代码执行顺序是这样的：

• 先创建Vertices，此时它只有Vertex这一个属性
• 调用第一次console.log(Vertices)——控制台这时候只是把这个对象的引用记下来了，并没有立刻把所有属性都渲染出来
• 接着执行Object.assign，给Vertices加上了InstanceMatrix属性
• 最后调用第二次console.log(Vertices)

等你在控制台里点展开第一次的输出结果时，其实已经是Object.assign执行完之后了，所以控制台读取的是Vertices的最新状态，自然就显示出了InstanceMatrix。

附加问题：两次输出的差异为啥存在？ #

第一次console.log执行的瞬间，Vertices确实还没有InstanceMatrix，所以控制台显示的外层（没展开的那一行）是当时的真实状态：{Vertex: {…}}。但当你展开它时，控制台会去拉取对象的当前实时状态，这时候InstanceMatrix已经被加上了，所以展开后能看到它。

而第二次console.log是在Object.assign之后调用的，这时候Vertices已经有InstanceMatrix了，所以控制台记录的外层结构直接就包含了这个属性：{Vertex: {…}, InstanceMatrix: {…}}，展开后的内容当然也和最新状态一致。

怎么看对象的真实快照？ #

如果想看到第一次console.log时对象的真实状态，你可以用这两种方式：

1. 把对象转成字符串打印（深快照，适合简单对象）：

console.log(JSON.stringify(Vertices))

2. 创建浅拷贝的快照（适合复杂对象，避免循环引用问题）：

console.log({...Vertices})

这样后续修改原对象就不会影响到打印的结果啦。

内容的提问来源于stack exchange，提问作者z0rberg's