console.log一个JavaScript对象/类 - 在原型更改前后是相同的结果。

Question

我正在尝试理解js原型和类的工作原理，并使用Chrome的console.log打印并查看我的对象状态，同时添加新属性等。

这是我正在使用的代码：(fiddle)

function Person(){}

Person.prototype.sayHello = function(){ alert("Hello"); };
Person.prototype.name = "Name";

console.log(Person.prototype) //1st console.log

Person.prototype.surname = "Surname";

console.log(Person.prototype); //2nd console.log

我期望在控制台中打印出两个不同的结果，因为surname属性是在第一个控制台日志之后添加的。但实际上，控制台输出如下所示：

你可以看到，尽管它仅在第一次console.log之后添加，但两个输出都定义了surname属性。

你能解释一下原因吗？我错过了什么吗？console.log不会在调用时显示对象的当前状态吗？

提前感谢您的回答，最好的问候。

- BeNdErR

Answer 1

你设置人姓氏的下一行代码没有等待控制台日志，因为console.log是异步的。当你使用超时测试这段代码时，它会是正确的。

 function Person() {}

 Person.prototype.sayHello = function () {
     alert("Hello");
 };
 Person.prototype.name = "Name";

 console.log(Person.prototype) //1st console.log
 setTimeout(function(){
  Person.prototype.surname = "Surname";

 console.log(Person.prototype); //2nd console.log
 },1000);

在记录日志之前，您可以保存该对象的副本，然后它将起作用。

Chrome中同步控制台日志记录

更新： 我有一个更好的解决方案：
只需记录该对象的字符串版本，您就会没问题了。

console.log(JSON.stringify(Person.prototype))

- john Smith

---

看一下这个 链接：如果你在打开对象层次结构之前等待两个 console.log，surname 在两者中都存在。如果你在等待第二个日志时打开第一个对象，则不会显示 surname。为什么呢？ :O - BeNdErR

对我来说，在最新的Mac OSX上使用Chrome浏览器登录时，"surname"只出现在第二个日志中。 - john Smith

如果你等待第二个日志出现，然后（仅在此时）打开Person对象，会发生什么？ - BeNdErR

就像我说的那样，你可以只是复制对象并记录复制的实例，但是没错，这很奇怪 :D - john Smith

“你下一行代码设置人的姓氏，没有等待控制台日志，因为console.log是异步的。” 不，console.log不是异步的。但是控制台会保留对对象的实时引用，并且在控制台中展开对象是异步的。有时候是这样的，具体取决于你记录日志时控制台是否打开，以及其他因素。 - T.J. Crowder