关于javascript:热点面试题-consolelog-同异步问题

前言

极度投入，深度沉迷，边界清晰
前端小菜鸡一枚，分享的文章纯属个人见解，若有不正确或可待探讨点可随便评论，与各位同学一起学习~
欢送关注 『前端进阶圈』 公众号，一起摸索学习前端技术......
公众号回复 加群 或 扫码, 即可退出前端交流学习群，长期交流学习......
公众号回复 加好友，即可添加为好友

热点面试题：console.log()同异步问题？

eg:

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

以上代码在 开发者工具控制台 和 浏览器控制台 的输入状况：
- 开发者工具控制台
- 浏览器控制台
  1. 开展前：
  2. 开展后

Q: 为什么会呈现这个异样输入呢?

R：集体认为，在开发者工具控制台 和 浏览器控制台输入后果是不同的，次要起因是在类型上。

在 js 中对象是援用类型，每次应用对象时，都只是应用了对象在堆内存的援用。

前述代码，在批改 a.index++后，a 在堆内存中 index 值其余变成了 2，当不开展看的时候，console.log() 打印的是对象过后的快照，所以咱们看到的 index 值是批改之前的 1，当开展对象时，它实际上是从新去堆内存中读取对象的属性值了，因而当开展对象后看到的 index 值为 2。

在 `《你不晓得的javascript中卷》` 书中，第二局部异步和性能 -> 第一章异步：当初与未来 -> 异步控制台有说起：

并没有什么标准或一组需要指定`console.＊办法族`如何工作——它们并不是JavaScript正式的一部分，而是由宿主环境（请参考本书的“类型和语法”局部）增加到JavaScript中的。因而，不同的浏览器和JavaScript环境能够依照本人的志愿来实现，有时候这会引起混同尤其要提出的是，在某些条件下，某些浏览器的`console.log(..)`并不会把传入的内容立刻输入。呈现这种状况的次要起因是，在许多程序（不只是JavaScript）中，I/O是十分低速的阻塞局部。所以，（从页面/UI的角度来说）浏览器在后盾异步解决控制台I/O可能进步性能，这时用户甚至可能基本意识不到其产生。上面这种情景不是很常见，但也可能产生，从中（不是从代码自身而是从内部）能够察看到这种状况：

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

咱们通常认为恰好在执行到 console.log(..) 语句的时候会看到a对象的快照，打印出相似于 { index: 1} 这样的内容，而后在下一条语句 a.index++ 执行时将其批改，这句的执行会严格在a的输入之后。
少数状况下，前述代码在 开发者工具的控制台 中输入的对象示意与冀望是统一的。然而，这段代码运行的时候，浏览器可能会认为须要把控制台I/O提早到后盾，在这种状况下，等到 浏览器控制台 输入对象内容时，a.index++可能曾经执行，因而会显示{ index: 2 }。
到底什么时候控制台I/O会提早，甚至是否可能被察看到，这都是游移不定的。如果在调试的过程中遇到对象在 console.log(..) 语句之后被批改，可你却看到了意料之外的后果，要意识到这可能是这种I/O的异步化造成的。

书中倡议：

如果遇到这种少见的状况，最好的抉择是在JavaScript调试器中应用断点，而不要依赖控制台输入。次优的计划是把对象序列化到一个字符串中，以强制执行一次“快照”，比方通过 JSON.stringify(..)。
总结：
综上所述，console.log() 打印进去的内容不能100%可信，但通常对于 Number, String,Boolean, Null, Undefined 的打印内容是可信的，但对于 Object 等援用类型来讲，就会呈现上述异样打印。
倡议：对于个别根本类型的调试，可应用 console.log() 根本不会呈现问题。但在调试对象时，最好应用打断点 (debugger) 来调试更好。
答复问题，集体认为，在 Number, String, Boolean, Null, Undefined 类型上，console.log() 是同步的，但在 Object 等援用类型上不好做评判。也欢送大家在评论区探讨~

文章特殊字符形容：

问题标注 Q(question)
答案标注 R(result)
注意事项规范：A:(attention matters)
详情形容标注：D:(detail info)
总结标注：S:(summary)
剖析标注：Ana:(analysis)
提醒标注：T:(tips)

往期回顾：

热点面试题：过程系列问题？
热点面试题：Node.js 中的垃圾回收机制？
热点面试题：简述 http3.0~http1.0 别离有什么改良？
JavaScript中的AMD和CMD标准
Vue数据监听Object.definedProperty()办法的实现

最初：

欢送关注 『前端进阶圈』 公众号，一起摸索学习前端技术......
公众号回复 加群 或 扫码, 即可退出前端交流学习群，长期交流学习......
公众号回复 加好友，即可添加为好友

前言