使用console.log出现的bug
2023-04-18 本文已影响0人
LcoderQ
问题
在代码中按照执行流程，发现无法得到预计的结果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" >
<title>console.log测试</title>
</head>
<body>
<script>
const obj = {
name: 'Tom',
height: 170,
};
console.log(obj);
obj.height = 180;
</script>
</body>
</html>
- 预计输出的结果为
{ name: 'Tom', height: 170 }
然而实际输出的结果为
image.png
- 同样的问题也出现在vue中
解决原理和方法
原理
-
我们知道JS里面分为基本类型和引用类型，我们在代码中调用console.log(obj), 其实就是把obj这个引用类型传给了console.log这个函数，只有这个函数真正用到obj内部属性的时候，才会去内存中查找对应的属性值。
-
由于console.log并没有标准的实现规范，在chrome里是异步的，导致后面obj.height的赋值先与console.log对height属性的取值，这个顺序问题，造成了上述的问题。
解决方法
-
使用同步的方式保存调用console.log时，obj的快照，比较典型的是使用深拷贝、JSON序列化的方式，这样在后续改变obj的属性也不会对console.log的调用造成影响
-
使用debugger的方式进行调试
