Console.log异步输出现象探究

前端学习 评论

有以下一段代码：

1
2
a = [1, 2, 3];
console.log(a, a.pop());

在浏览器中执行后，控制台输出如下：

1
[1, 2] 3

？？难道不应该是[1, 2, 3] 3？

这是因为，在许多程序中，I/O被认为是低速的阻塞环节。在浏览器中，console.log会被异步处理以提高性能

因此来到console.log时，可以理解为：在括号内语句执行完毕后，再按照顺序进行输出

最后看到的是数组被更改后的样子

更进一步理解，若console.log输出内容为对象，指向的是对象的地址，当点开对象进行查看时，才会去访问相应地址获取内容，如

1
2
3
4
5
6
7
person = {
	name: "张三",
	age: 18,
};
console.log(person);
person.name = "李四";
console.log(person);

代码在浏览器中执行后，控制台输出如下：

因为console.log打印的是对象当时的快照

1
2
{name: '张三', age: 18}
{name: '李四', age: 18}

但当你点开两个对象，查看详细内容时，就会变成下面的内容：

1
2
3
4
5
6
7
8
9
{name: '张三', age: 18}
    age: 18
    name: "李四"
    [[Prototype]]: Object

{name: '李四', age: 18}
    age: 18
    name: "李四"
    [[Prototype]]: Object

因为在点开对象时，会重新访问对象地址进行查询，因此之前的张三，变成了李四

参考内容：

console.log()输出时是同步还是异步的问题 · Issue #30 · bytemofan/think (github.com)

console.log是异步的吗？_Summer-Qin的博客-CSDN博客_consolelog是异步调用

关于JS console.log() 是同步 or 异步引发的问题_知白守黑_的博客-CSDN博客_console.log 异步

枫与风