js基礎----dom節點使用console.log打印始終是最新的現象（待驗證）

今天在復習dom節點的創建的時候發現打印日志的時候，不管log的位置在哪里，打印出的節點始終是最新的

這就讓我很困惑了，js不是由上到下執行的嗎，然后問了同事，他分享了打印對象時候的類似的現象

 

先展示下打印dom節點的demo

<script>
/* 創建標簽節點 */
var p_tag = document.createElement('p');
console.log('p_tag: ', p_tag);
 
/* 創建文本節點 */
var text_node = document.createTextNode('我是文本節點');
console.log('text_node: ', text_node);

/* 創建標簽節點 */
var style_attribute = document.createAttribute('style');
style_attribute.value = "color: red;"
console.log('style_attribute: ', style_attribute);

/* 組合標簽節點，文本節點，標簽節點 */
p_tag.appendChild(text_node);
p_tag.setAttributeNode(style_attribute);
console.log('p_tag complex: ', p_tag);
console.log('p_tag complex text: ', p_tag.innerHTML);
 
// /* 給標簽設置內容 */
p_tag.innerHTML = "我是p的文案"
console.log('p_tag txt: ', p_tag);
console.log('p_tag txt innerHtml: ', p_tag.innerHTML);

</script>

控制台打印出的內容如下：

 

圈出來的三個地方打印出來的都是最新的p標簽， 但是innerHTML的屬性值是不一樣的

 

同事分享的場景demo如下

    var people = {name: "Summer", look: "beautiful"}
    console.log('people: ', people);
    people.name= "hanMeiMei";
    people.look = "handsome";

 

控制台打印如下， 打印出的對象內容和展開里面顯示的不一致

 

 第一種場景造成的原因我是這么理解的，dom節點是一個對象，在內存中是分堆/棧存儲的，打印的時候p_tag實際是dom節點存儲的地址，根據地址找到的就是更新后的dom節點

 

第二個場景： chrome控制台打印對象，默認沒有展開（此時是原始people)，顯示的是更改前的對象；展開后才是內存中地址對應棧中存儲的對象----修改后的對象(newPeople)

我還是不明白默認沒有展開的時候為什么還是原始的people， 我使用safari瀏覽器打印出來是下面這樣的

 

 所以大膽猜測chrome瀏覽器打印對象必須以展開后的為准