Chrome控制台中JavaScript对象属性修改后函数引用的日志困惑咨询

嘿，我来帮你搞明白这个控制台里的小坑！

先把你的代码贴出来，方便咱们一起分析：

function makeFunction() { 
  this.name="Some Name";
  this.display=function(){return this.name;};
  this.returning=function(){return this.display;};
}
var object1=new makeFunction();
console.log(object1);//首次打印object1
object1.name="Another name";//尝试修改object1的属性
console.log(object1);//第二次打印object1的内容

你大概率是遇到了这个情况：两次打印object1后，在控制台展开对象时，发现哪怕是第一次打印的那条记录，name属性显示的也是修改后的"Another name"，是不是很困惑？

这其实是Chrome控制台的一个特性——它打印的对象是“活”的引用，而非打印那一刻的快照。具体来说：

• 当你执行console.log(object1)时，控制台只是保存了这个对象的引用地址，并没有立刻把所有属性的当前值都生成静态快照。
• 等你修改object1.name之后，对象的实际属性值已经更新了。
• 当你在控制台点击展开对象条目时，浏览器才会去读取对象当前的真实状态，所以你看到的是修改后的name值，而不是打印时的"Some Name"。

另外再说说display函数的问题：这个函数里的this是调用时才确定绑定对象的。每次调用object1.display()，它都会实时取当前object1.name的值，所以哪怕你后续修改了name，调用display也会返回新值，这完全符合JavaScript中this的绑定规则——对象方法调用时，this指向调用该方法的对象本身。

如果想要看到打印那一刻的对象静态快照，你可以用这个小技巧：

console.log(JSON.parse(JSON.stringify(object1)))

这样会把对象转换成JSON字符串再解析回来，得到的就是打印时刻的静态副本，不会跟着对象后续的修改而变化。

内容的提问来源于stack exchange，提问作者Prithiviraj