乐趣区

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

jiezi

前言

极度投入，深度沉迷，边界清晰

前端小菜鸡一枚，分享的文章纯属个人见解，若有不正确或可待探讨点可随便评论，与各位同学一起学习~

欢送关注 『前端进阶圈』 公众号，一起摸索学习前端技术 ……

公众号回复 加群 或 扫码, 即可退出前端交流学习群，长期交流学习 ……

公众号回复 加好友，即可添加为好友

热点面试题：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 等援用类型上不好做评判。也欢送大家在评论区探讨~

文章特殊字符形容：

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

往期回顾：

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

最初：

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