【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()打印对象信息可得留点儿心眼了！！！

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