console.log()输出异步问题

想通过console.log()来打印输出变量的结果,后发现变量所打印出来的结果与自己预想的不一致,所以去深入了解一下console.log()

原因

在分析之前,我们得知道一点,JS中对象是引用类型,每次使用对象时,都只是使用了对象在堆中的引用。

例如如下代码

let a = { index: 1}
console.log(a)  //此处打印出   Object  { index: 2 }
a.index++

按照正常的代码思路,代码顺序执行,打印出来应该是 index: 1, 而不是index: 2,

console.log打印的是对象当时的快照信息,当展开对象时候,会去内存读对象的属性值。

《你不知道的javascript中卷》第二部分异步和性能1.1节异步控制台部分有提及:

尤其要提出的是,在某些条件下,某些浏览器的console.log(…) 并不会把传入的内容立即输出。出现这种情况的主要原因是,在许多程序(不只是JavaScript)中,

I/O 是非常低速的阻塞部分。所以,(从页面/UI 的角度来说)浏览器在后台异步处理控制台I/O 能够提高性能,这时用户甚至可能根本意识不到其发生。

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

句的执行会严格在a 的输出之后。大部分情况下代码在开发者工具的控制台中输出的对象表示与期望是一致的。但是,这段代码运行的时候,浏览器可能会认为需要把控

制台I/O 延迟到后台,在这种情况下,等到浏览器控制台输出对象内容时,a.index++ 可能已经执行,因此会显示{ index: 2 }。

结论

在console非引用类型对象的时候,能够得到正确的结构,但是在console引用对象类型的时候,console的结果就不一定准确了

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值