乐趣区

consolelog眼见不为实的原因

jiezi

所有结果的运行环境都为 Chrome，不同的浏览器运行结果可能不同

眼见不为实

第一行打出来是 Obj，点开后发现居然有属性 a 且值为 ” 赋值后 ”
第二行打印出属性 a 的值，却是 Undefined

        let test = {}
        console.log(test)
        console.log(test.a)
        test.a="赋值后"

深入分析 console.log(Object)

为什么会出现眼见不为实的情况

如果我们打印一个对象,chrome 默认会省略具体信息，只显示一个 Object，这是引用的快照，而不是快照的内容
你不点开，引擎是不会去这个引用的地址去取内容的

        let obj = {
            a:"a",
            b:{bb:'bb'},
            timeOut:"now"
        }
        console.log(obj)
        console.log(obj.a)
        console.log(JSON.stringify(obj))
        
        obj.a="a 修改后"
        obj.b.bb="bb 修改后"
        
        console.log(obj)

当我们点击这个 object 展开的时候，chrome 会重新获取这些引用的值
但当我们点击 object 去展开的时候，代码已经执行完了，于是重新获取的是修改过的值
实际上相当于一种懒加载，这也是为什么你可以在控制台无限查看 Object 的 prototype 了。

setTimeout 验证 Chrome 取值模式

下面的代码会有两种不同输出，只取决于你点开打印出来的 Object 的时间

        let obj = {timeOut:"now"}
        
        console.log(obj)
        console.log(obj)
        console.log(obj.timeOut)
        
        
        setTimeout(()=>{obj.timeOut="五秒后"},5000)

第一种情况为你不等待，直接点击展开两个 Object,timeOut 都为 now，即使你等了 5 后折上再展开去拉取值，值再也不会改变了，chrome 应该会存储这次的拉取过的数据，不会再改变了，

第二种情况是再展开第二个 Object 的时候我等了 5 秒钟再展开

获取准确的对象信息 -console.log(JSON.stringify(obj))

这种方式能强制打出现在的结果，
把对象序列化到一个字符串中，以强制执行一次“快照”

console.log 是异步或是同步的说法是不准确的

这不是异步和同步的问题，console 并不是 JavaScript 提供的对象，而是由宿主环境（请参考本书的“类型和语法”部分）添加到 JavaScript 中的。这具体到不同的浏览器，比如 Chrome 中是由 Devtool 的控制台提供，Firefox 中是由 Firebug 的控制台提供。

《你不知道的 javascript 中卷》中的部分具体说明

并没有什么规范或一组需求指定 console.* 方法中如何工作——它们并不是 JavaScript 正式
的一部分，而是由宿主环境（请参考本书的“类型和语法”部分）添加到 JavaScript 中的。因此，不同的浏览器和 JavaScript 环境可以按照自己的意愿来实现，有时候这会引起混淆。

尤其要提出的是，在某些条件下，某些浏览器的 console.log(..) 并不会把传入的内容立即输出。出现这种情况的主要原因是，在许多程序（不只是 JavaScript）中，I/O 是非常低速的阻塞部分。所以，（从页面 /UI 的角度来说）浏览器在后台异步处理控制台 I /O 能够提高性能，这时用户甚至可能根本意识不到其发生。

下面这种情景不是很常见，但也可能发生，从中（不是从代码本身而是从外部）可以观察到这种情况：
PS: 可以试试这个

var a = {index: 1};
// 然后
console.log(a); // ??
// 再然后
a.index++;

我们通常认为恰好在执行到 console.log(..) 语句的时候会看到 a 对象的快照，打印出类
似于 {index: 1} 这样的内容，然后在下一条语句 a.index++ 执行时将其修改，这句的执
行会严格在 a 的输出之后。

多数情况下，前述代码在开发者工具的控制台中输出的对象表示与期望是一致的。

但是，这段代码运行的时候，浏览器可能会认为需要把控制台 I /O 延迟到后台，在这种情况下，
等到浏览器控制台输出对象内容时，a.index++ 可能已经执行，因此会显示{index: 2}。

到底什么时候控制台 I /O 会延迟，甚至是否能够被观察到，这都是游移不定的。

如果在调试的过程中遇到对象在 console.log(..) 语句之后被修改，可你却看到了意料之外的结果，要意识到这可能是这种 I /O 的异步化造成的。

如果遇到这种少见的情况，最好的选择是在 JavaScript 调试器中使用断点，而不要依赖控制台输出。次优的方案是把对象序列化到一个字符串中，以强制执行一次“快照”，比如通过 JSON.stringify(..)。

退出移动版