歡迎關(guān)注微信公眾號：全棧工廠

1.問題概述

今天在調(diào)試一個前端頁面的時候，使用了console.log()打印變量信息，出現(xiàn)了一個詭異的情況，大致描述為允許下面一段代碼：

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

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

控制臺信息

按照道理說，在打印obj之前是不存在test屬性的，可是它偏偏就在那里靜靜的躺著！

2.填坑

最后查閱資料才知道，原來瀏覽器在打印對象的時候只是打印的一個對象快照信息，當你在控制臺點擊展開對象的時候，瀏覽器才會去讀這個對象具體屬性，但是那個時候，這段代碼早就已經(jīng)運行完了，‘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.結(jié)論

以后用console.log()打印對象信息可得留點兒心眼了?。?！

注：文中如有任何錯誤，請各位批評指正！