Question

javascript console.log会产生令人困惑的结果。我执行了代码。

    var obj = {a: {b: {c: {}}}};
    console.log(obj);
    obj.a.b.c.name = "rafael";

然后我查看控制台窗口并展开对象。这是

Object{a: {b: {c: {name: "sohan"}}}}

但我希望它是

Object{a: {b: {c: {}}}}

为什么这种令人困惑的行为？

Answer 1

唯一令人困惑的是名称被更改。这只是伏都教（或者你的编辑）。但是在将值应用于新属性之前，您将登录到控制台。试试这个。

var obj = {a: {b: {c: {}}}};
obj.a.b.c.name = "rafael";
console.log(obj); //console after applying the value

你应该得到Object{a: {b: {c: {name: "rafael"}}}}

Answer 2

控制台行为很古怪，会因浏览器和控制台而异。在Google Chrome上，首次展开时，对浏览器中记录的对象进行延迟评估。

这意味着，如果您将空对象{{1}}记录到控制台中，并展开它（对象树）以查看它，它将评估x的值并显示值控制台为x。但是，如果随后在实际展开属性之前添加属性，它将显示当前存在于内存中的对象。因此，如果您执行{}，则会显示为x.test = 1。

Answer 3

总结：可变对象的解析似乎推迟到您在控制台中检查它们的那一刻。这是有道理的，因为如果你在日志记录中捕获了一个可变对象的状态，那么每次登录它时都需要大量的内存才能完成对象的深层复制。

更多详细信息和示例以显示此行为：行为可能因浏览器而异，但在Chrome中我观察到的行为是，在console.log（obj）中记录了对JS对象的引用。在您尝试在控制台中展开对象之前，将推迟该引用的值。试试这个：

var obj = {a: {b: {c: {}}}};
console.log(obj);

然后展开引用（obj - ＆gt; a - ＆gt; b - ＆gt; c），验证没有属性＆＃34; name＆＃34;尚未确定。

然后分配属性：

obj.a.b.c.name = "rafael";

将此与您描述的行为进行比较：

var obj = {a: {b: {c: {}}}};
console.log(obj);
obj.a.b.c.name = "rafael";

然后展开对象引用，看看＆＃34; name＆＃34;已经设置了对象C的属性，因为我们只记录了对象的引用。