博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
console.log是异步的吗?
阅读量:7090 次
发布时间:2019-06-28

本文共 1159 字,大约阅读时间需要 3 分钟。

 

今晚我加的一个前端群里有人问了这样一个问题,下面这段代码在Chrome中运行:

  

打开控制台后,却发现运行结果是这样的:

Object    name: "2"    __proto__: ObjectObject    name: "2" __proto__: Object

这个结果不符合我们所期望的第一个输出是name: "1"

难道console.log是异步的?

可是当我将那段JavaScript代码粘贴到控制台直接运行,或是打开控制台后刷新一遍网页,运行结果就会变成:

Object {
name: "1"}Object {
name: "2"}

这正是我们所期望的结果。

为什么会这样?

因为代码在运行的时候控制台没有打开

首先明确一点,a所储存的是一个引用类型值的地址,所有对a的操作都会具体到这个地址所对应的那个对象上。其次,console并不是JavaScript提供的对象,而是浏览器的控制台提供的。这具体到不同的浏览器,比如Chrome中是由Devtool的控制台提供,Firefox中是由Firebug的控制台提供。

在Chrome中,console.log在控制台打开后才起作用,也就是说,当你打开控制台时,console.log才会将之前被传进去的参打印出来。

那么问题来了,在上述代码中,传进console.log中的参是一个地址,当代码执行完毕后,打开控制台,console.log开始起作用,那么它打印出的实际上是已经做完全部处理后的对象。这就相当于这样的执行顺序:

var a = {name: '1'};a.name = '2';console.log(a);console.log(a);

如果是打开控制台再运行代码,那么console.log是直接起作用的,代码会顺序执行,所以所看到的结果是符合期望的。

那么该如何解决这个问题?只能在执行的过程中创建新对象来曲线救国了:

var a = {name: '1'};console.log(JSON.parse(JSON.stringify(a))); a.name = '2'; console.log(JSON.parse(JSON.stringify(a)));

这相当于帮浏览器对要被改变的对象存了个快照。

当然,只要你开着控制台来执行代码,那么是不会出现这样的问题的。

最后我认为这不是个BUG,相反这是个节省运算资源的行为。无论控制台是否打开console.log都起作用是十分不妥的。

开着控制台还会出现不符合期望的结果才是BUG,然而早就被修复了。

转载于:https://www.cnblogs.com/sunsie/p/7171380.html

你可能感兴趣的文章
SEO代码优化的方法
查看>>
Java记录 -77- 增强的for循环与自动拆装箱
查看>>
URI和URL的区别
查看>>
rsync+inotify配置
查看>>
我的友情链接
查看>>
Spring Security 杂记2
查看>>
Android学习笔记系列
查看>>
Struts原理
查看>>
@SuppressWarnings("serial")在Java中有什么作用?
查看>>
PropertyPlaceholderConfigurer 和PropertiesFactoryBean区别
查看>>
unable to parse template class 'Text Files' 解决
查看>>
强大的bat文件搞定系统所有问题
查看>>
程序员常用快捷键
查看>>
0216_帧中继_ipsec
查看>>
play(三) play实例项目开发Yabe 2前端页面
查看>>
天猫商城的五大购物优势
查看>>
数据结构——栈
查看>>
rocketmq之源码分析源码构建(二)
查看>>
[转载] New Concept English 1——Lesson 2 Is this your...?
查看>>
Java IO_Socket
查看>>