苦逼前端

chrome控制台的console.log输出,有时候很坑爹

Javascript2014-01-17 12:21

今天同事遇到一个问题,简单描述如下:在用console.log打印某个对象(a)和这个对象的属性(a)的时候(同时打印),查看对象a时发现确实有a这个属性,但当时打印的却是undefined,这是为啥呢?

先看这段代码:

var a = {b: 2, c: 3, d: 4, e: 5, f: 6, g: 7};
console.log(a)
a.a = 1;

大家猜猜,在控制台的输出中查看a这个对象,它会有x属性吗?答案是,有时候有,有时候没有...

先来说说console.log的几种行为:

  1. 当打开带有上面代码的页面时,如果未提前开启控制台,代码运行完毕后又开启了控制台,那么只能看到输出一个object和它前面的小三角。这时候点开这个小三角,会发现a这个对象上确实有a这个属性。

  2. 当打开带有上面代码的页面时,开启了控制台,或者开启控制台再刷新几下页面,会看到一个输出一个object和它的5个属性还有它前面的小三角以及后面的省略号,这时候直观的看,并没有a这个属性,但是点开小三角会发现它也有a这个属性。

  3. 在2的情况下,减少a的属性的个数,使其小于5个,以3个为例。这时候会输出一个object和它的全部3个属性,并且它前面不会有小三角,这时候我们发现,没有a这个属性了...

通过上面的例子,我们发现当我们点对象前面的小三角的时候,浏览器会去这个console.log的上下文中重新查询这个object,把它所有的属性都给罗列出来..而并不是只打印了console.log当时的状态...

所以我们在用console.log打印对象的时候,尤其是其属性比较多会产生小三角的时候,点击这个小三角所罗列出来的a,并不是当时打印的时候的状态。换句话说,点击小三角所看到的属性,并不能作为当时这个对象含有这个属性的凭证...应该打印a[属性]才能确定...

其实人家大chrome也给出提示啦,看看点击这个小三角的时候,右方会出现一个小叹号,鼠标放上给出了这样的提示:

大致意思是:下面的这些属性,是在这个对象被扩展的时候获取到的。数组也有同样的问题。(不明白first是啥意思,我试过,扩展后再改变a的值,打印的a还是改变后的值,我也试过扩展后再删除a这个属性,打印结果也就没有a这个属性了)

上面提到的问题,还引发了另外一个问题。细心的同学会发现,在上面的2中,点击小三角查看a的属性的时候,发现a这个后添加的属性,排在了所有属性的前面,这是否说明,js中对象的属性是无序的呢?且看下一篇

评论(0)
  • 暂无评论,求挽尊...
还可输入200个字