用一分钟理解console的这个原理,多留几根黑发~

引言

问题: console打印出的值与实际值不符的缘由。javascript

碰到这个问题是由于某一个值a更改成a1后,然而打印出来的值倒是a1,展开打印的值是a。由于不理解这个现象,致使调试代码走了不少弯路,最后才定位到问题。java

先来看现象

缘由

代码chrome

let a = { name: 'langlang', look: 'handsome'};
 console.log(a);
 a.name = 'shuishui';
 a.look = 'beautiful';
复制代码

缘由: 打印出的值是运行时的值,点击展开后是最后修改的值。ui

chrome控制台打印对象是引用的,默认没有展开,展开后就是最后修改的值,因此会出现展开后的值与以前不一样。spa

以前那个bug是由于a更改成a1后,后面又隐式的将其更改成a。因此打印的时候是a1的值,但后面被隐式更改了,展开后就是隐式更改后的a的值。调试

若是想看到实时的值,能够直接打印字符串:code

console.log(JSON.stringify(a));
复制代码

结果:cdn

相关文章
相关标签/搜索