console异步还是同步

拼搏现实的明天。 2022-06-09 02:40 173阅读 0赞

在看Async JavaScript这本书时意外发现有个地方跟作者结果不相同，然后就在Stack Overflow得到了解释。

原问题：

> [https://stackoverflow.com/questions/23392111/console-log-async-or-sync][https_stackoverflow.com_questions_23392111_console-log-async-or-sync]

### 问题： ###

![这里写图片描述][SouthEast]

书上说在webkit内核下：

var obj = {};
    console.log(obj);
    obj.foo = 'bar'; 
    // {foo:bar}

实际上:

var obj = {};
    console.log(obj);
    obj.foo = 'bar'; 
    {}
    "bar"

我们打开obj对象的折叠：

![这里写图片描述][SouthEast 1]

神奇的发现obj竟然不空！

### 再来个更加直接的例子： ###

chrome浏览器中：  
![这里写图片描述][SouthEast 2]

node环境下：

![这里写图片描述][SouthEast 3]

热闹看够了，我们来说说这个问题，在node环境console是严格同步的，所以正常执行，但是在作者写书时webkit有个问题，后来webkit就打了一个补丁，结果就跟以前不一样了。

### 事情发生的原因 ###

至于为啥chrome打开就变成的跟表面上不一样了

> 控制台将需要将记录的值存储在某处，并将其显示在屏幕上。渲染将会以异步方式发生（被限制到速率限制更新），以及将来与控制台中记录的对象的交互（如扩展对象属性）的交互。  
> 因此，控制台可能会克隆（序列化）您记录的可变对象，也可能存储对它们的引用。第一个对深层物体不能很好地工作。此外，至少在控制台中的初始呈现可能会显示对象的“当前”状态，即当您记录的示例中的对象的状态Object \{\}。但是，当您扩展对象以进一步检查其属性时，控制台可能只存储对对象及其属性的引用，并且现在显示它们将显示其当前（已突变）状态。

就是引用的原因啦，也就是给console.log传的参数其实是存在某处的，当前的结果是复制的可变对象，但是存储下来的是对象的引用就发生了表面上和打开对象结果不一样的现象了。

[https_stackoverflow.com_questions_23392111_console-log-async-or-sync]: https://stackoverflow.com/questions/23392111/console-log-async-or-sync
[SouthEast]: /images/20220609/872dd611430e4652a0e8fd8aff6ebbb5.png
[SouthEast 1]: /images/20220609/5cb70f5ce5874265a1d75d678a5d21bb.png
[SouthEast 2]: /images/20220609/a08b521eea3c4e94870377f1ec7104d5.png
[SouthEast 3]: /images/20220609/96451b70da4e4102a009914386a754a6.png