Chrome Developer Tools Scope面板中的颜色含义是什么？

Question

我很好奇为什么有些变量是固定的,有些变量是半透明度.他们之间有什么区别？这两种变体都可在全球范围内使用.

Answer 1

如果属性显示为暗灰色,则表示它不可枚举.因此,当您遍历对象的属性时,它不会显示出来:

以位置对象为例:

当列举性质toString,valueOf并__proto__没有显示出来:

var keys = []; for (var key in location) { keys.push(key) }; console.log(keys)
-> ["replace", "assign", "hash", "search", "pathname", "port", "hostname", "host",  
"protocol", "origin", "href", "ancestorOrigins", "reload"]

您可以使用propertyIsEnumerable以查明在循环对象时是否显示该属性:

location.propertyIsEnumerable("search")
// true
location.propertyIsEnumerable("toString")
// false

默认情况下,对象的所有属性都是可枚举的:

但您可以通过使用defineProperty以下方式更改它:

Object.defineProperty(post, "author", {
     value: "John Doe",
     enumerable: false
});

当您将该对象记录到控制台时,作者属性将以略微更浅的紫色阴影显示.

(似乎简写版本不支持此格式化功能,但我们可以强制DevTools使用较长版本使用该dir函数的小对象.)