共计 965 个字符，预计需要花费 3 分钟才能阅读完成。
有许多坑可能真的须要本人去踩一踩😂，不得不说 Javascript 真的是一门神奇的语言～～；一些看起来司空见惯的调用，往往得不到本人想要的后果，只能通过一直踩坑或者他人踩的坑积攒经验值，来再次踩坑～～
最近在调 bug… 因为波及的链路比拟长、多个我的项目之前通过 postMessage 来进行通信，首先想到的就是在 JS 调用链路中通过 console.log 输入状态变量，察看状态变量是在何时扭转的，进行 bug 定位。
原本一个挺简略的 bug，因为 console.log 的坑，导致在定位 bug 的路上进入了一个谬误的方向，愣是多花了良久工夫。最初还是在 debugger 的帮忙下，胜利解决了 bug。
问题复现
首先来看一段代码
<!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>在浏览器控制台中，你认为会输入什么？如果没有踩这个坑之前我预计也会认为会输入这个后果：
然而，
实际上：
是不是感觉像是薛定谔的猫，箱子没关上之前不晓得外面是什么状态？
起因
咱们晓得 JS 外面分为根本类型和援用类型，具体每个类型的分类能够查看 MDN。咱们在代码中调用 console.log(obj), 其实就是把 obj 这个援用类型传给了 console.log 这个函数，只有这个函数真正用到 obj 外部属性的时候，才会去内存中查找对应的属性值。
因为 console.log 并没有规范的实现标准，在 chrome 里是异步的，导致前面 obj.height 的赋值先与 console.log 对 height 属性的取值，这个程序问题，造成了上述的问题。
解决办法
一般来说有两种形式能够解决这个问题：
应用同步的形式保留调用 console.log 时，obj 的快照，比拟典型的是应用深拷贝、JSON 序列化的形式，这样在后续扭转 obj 的属性也不会对 console.log 的调用造成影响
应用 debugger 的形式进行调试，不过在长链路的调试中，跳来跳去的调试稍微有点麻烦😂
作者：flyingbird
正文完
发表至： javascript
2021-04-28
