【JS】记console.log()的一次踩坑

1.问题概述

今天在调试一个前端页面的时候，使用了console.log()打印变量信息，出现了一个诡异的情况，大致描述为允许下面一段代码：

var obj = {'liqing':'Hero'}
console.log(obj)
obj.test="i'm test

最后控制台竟然打印出了下面的信息：

控制台信息

按照道理说，在打印obj之前是不存在test属性的，可是它偏偏就在那里静静的躺着！

2.填坑

最后查阅资料才知道，原来浏览器在打印对象的时候只是打印的一个对象快照信息，当你在控制台点击展开对象的时候，浏览器才会去读这个对象具体属性，但是那个时候，这段代码早就已经运行完了，‘test’属性也早就存在于obj对象中了。为了验证这个事实，我们使用下面代码：

var obj = {'liqing':'hero'}
console.log(obj);
obj.test="i'm test"
obj.__defineGetter__('liqing', function(){ console.log('You are trying to get property `liqing`');return 'hero'; })

当我们运行这段代码的时候就酱紫的：

图2-1

但是，当我们展开控制台打印的对象后我们看到：

图2-2

说明，浏览器是在我们点开对象属性的时候才去读取存储在内存中的属性值！

3.结论

以后用console.log()打印对象信息可得留点儿心眼了！！！

注：文中如有任何错误，请各位批评指正！