javascript - Why does console.log in Chrome behave asynchronously?

Question

I encountered a very strange and weird problem when I was writing code today

/**
 * Created by zhang on 5/26/2017.
 */

var Wiw = function () {
    this.config = {
        "form":{
            "height":300,
            "width":500
        },
        "content":"please edit you text!",
        "handler":function () {
            //empty
        }
        
    }
    console.log(this.config);
}

Wiw.prototype = {
    ext:function (cfg) {
        console.log("2");
        $.extend(this.config,cfg);
        //执行合并
    }
}

document.getElementById("a").onclick = function () {
    new Wiw().ext({
        form:{}
    })
}

Very common. First, new is initialized and then the merge method is called. Logically speaking, the output result should be the config attribute object before the merge and the merged one. But the actual situation is indeed

It behaves like it is merged and then output, but the calling sequence is normal

What’s even weirder is

When you put

 console.log(this.config); 改成
console.log(this.config.form)

The result returned to normal

It has always been normal in fireFox

Answer 1

What to say, I think, the output content of the chrome console is a bit real-time, look at the screenshot, even though the name of o was changed later, when you click it, you can see why the name is inconsistent with the output above = =. It is also in line with the question that later said that changing to form is normal again. I think the one next to the downward arrow is hard-coded, but clicking on the content is real-time.

Another question: http://www.css88.com/jqapi-1....

var o = {form:{width:10}}
$.extend(true, o,{form:{height:20}})