Javascript 在Chrome开发者工具控制台中使用console.dir时，褪色属性的意义是什么

在chrome的控制台中使用console.dir（）时，对象的属性稍微褪色，这意味着什么

例如，看看这个屏幕截图中的“顶部，宽度，世界可见，x&y”

我已经在这里查看了API参考，但是运气不好

---

谢谢

我在文档中找不到任何官方解释，但根据一些测试，我有一个很好的猜测，灰显属性是由Javascript引擎而不是代码本身设置的默认属性。以下是一些例子：

数组中的长度

在控制台中给出：

请注意，索引不是灰显的，而是

length

，而

\uuuu proto\uuu

中的所有内容都是灰色的

原型 源代码

在控制台中给出：

这里有很多有趣的东西。

greet

的所有实例都不会灰显。但是，everywhere

\uuuuuu proto\uuuuuuu

都是灰色的（可能是因为引擎将其设置为原型）。另外，

Person

中被重写的构造函数也会灰显，但显式设置的

Employee

的构造函数不会灰显

---

因此，我认为这里有一个粗略的模式，即色度（e/ium）会使它认为您不太可能关心的属性变灰，因为它们是继承的，或者是由引擎作为语言的一个结构设置的，但它似乎并不完美。（但谁是，对吗？）另一件有趣的事情是尝试F12并键入

console.dir（window）

。在那里，除了网站的Javascript放入全局窗口名称空间的内容外，几乎所有内容都显示为灰色。

褪色的属性表示不可枚举的属性。如果我们这样做：

var a = {};
Object.defineProperties(a, {
    hello: { enumerable: false },
    world: { enumerable: true }
});
console.dir(a);

然后我们看到，

hello

已褪色，而

world

未褪色

您好property“>

在您的代码中，如果您对（obj中的prop）{console.log（prop）；}（其中

obj

是您在控制台屏幕截图中向我们显示的任何对象），您将看到只有褪色的属性没有被枚举

您还可以使用

Object.getOwnPropertyDescriptor（obj，“worldVisible”）

检查这一点，它应该返回一个具有

可枚举：false

属性的对象

---

请注意，属性名称上的斜体表示属性值是由getter函数定义的。（这也会导致该值在函数运行之前显示

（…）

值。）这与可枚举性是完全不同的问题，可枚举性会导致名称褪色。您可以使用italic getter定义的属性，而这些属性不是褪色的非可枚举属性，反之亦然。

这些褪色的属性是在展开对象后立即具有值，还是需要单击

（…）

？@apsillers，在我的示例中，我需要单击它们。但肯定与您答案中的可枚举属性有关。谢谢，因为斜体属性名称表示getter函数，但斜体getter也会导致

（…）

行为。如果您有斜体属性而没有

（…）

，那么这将是不寻常的。不过，您确实拥有它，所以这是完全正常的。（我在回答中添加了一些关于这一点的内容。）运行了一些测试，包括原始对象，它看起来是正确的答案。这也意味着它毕竟是值得知道的，所以我很高兴我问了。

var Person = function() {
  this.canTalk = true;
};

Person.prototype.greet = function() {
  if (this.canTalk) {
    console.log('Hi, I am ' + this.name);
  }
};

var Employee = function(name, title) {
  Person.call(this);
  this.name = name;
  this.title = title;
};

Employee.prototype = Object.create(Person.prototype);
Employee.prototype.constructor = Employee;

Employee.prototype.greet = function() {
  if (this.canTalk) {
    console.log('Hi, I am ' + this.name + ', the ' + this.title);
  }
};

var bob = new Employee('Bob', 'Builder');
bob.greet();
console.dir(bob);

var a = {};
Object.defineProperties(a, {
    hello: { enumerable: false },
    world: { enumerable: true }
});
console.dir(a);