console.log打印对象中遇到的问题

当我们执行下述代码时：

<script>

    var obj = {
        name: 'leesy',
        age: 15
    }
      
    console.log('未修改obj.age之前的obj',obj);
    console.log('未修改obj.age之前的obj.age',obj.age);
    
    obj.age = 150;

    console.log('未修改obj.age之前的obj',obj);
    console.log('未修改obj.age之前的obj.age',obj.age);

</script>

我们这里同时使用Google浏览器和Edge浏览器打开页面，查看控制台，结果如下图所示：

显然，这里出现了问题。未修改obj.age之前输出整个obj对象，但是obj中的age却出现了两个不同的值，一个是未展开打印的obj时（就是没有点击绿色箭头对应的两个箭头按钮），直接显示的age: 15，对应上图中就是右侧紫框中的内容；另一个是展开打印的obj时，显示的age: 150，对应上图中右侧橙色框线中的内容。 

简单来说，就是因为是否展开显示的问题。不展开，控制台默认显示当时对象obj的快照，而不是当前内存（堆内存）中obj.age的真实值；展开，控制台不会显示obj的快照，而是会重新去内存中取obj.age的真实值。

对于Object等引用类型来说，都可能会出现上述异常打印输出。

解决方案：

1. 改为console.log(JSON.stringfy(obj))，进行输出，该输出方式会打印出当前对象的快照，也就能拿到类似同步下的理想结果。

下图绿色框线中的内容，就是使用JSON.stringfy(obj)对修改obj.age前的obj对象进行输出，可以看到输出的obj.age就是未修改obj.age前的age值

2. 设置断点进行调试。