为什么Chrome devtool会以不同方式显示对象属性和对象本身？

Question

const a = {
  age: 12,
  name: 'Lucy'
};

console.log(a, a.age);

delete(a.age);

当我在Chrome开发工具中age时，有人向我解释console.log属性会发生什么，结果会显示如下吗？

Object {age: 12, name: "Lucy"} 12
  name:"lucy"
  __proto__:Object

如果我定义另一个对象并console.log它。

const b = {
  age: 12,
  name: 'lucy'
};

console.log(b);

控制台会打印出它拥有的所有属性吗？

Object {age: 12, name: "lucy"}
  age:12
  name:"lucy"
  __proto__:Object

Answer 1

这是因为您在删除其属性之前console.log该对象。

Object {age: 12, name: "Lucy"}只是Chrome devtool完成的快速对象快照。它不会改变你以后做的任何事情。

当您展开以显示对象属性时，devtool链接到对象引用并显示当前值。