Ответ 1

Выцветшие свойства apper для указания неперечислимых свойств. Если мы это сделаем:

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

то мы видим, что hello затухает, а world - нет.

В вашем коде, если вы делаете for(prop in obj) { console.log(prop); } (где obj - это любой объект, который вы показываете нам в скриншоте вашей консоли), вы увидите, что только выцветшие свойства не перечислены.

Вы также можете проверить это с помощью Object.getOwnPropertyDescriptor(obj, "worldVisible"), который должен вернуть объект с свойством enumerable: false.

Обратите внимание, что курсив в именах свойств указывает, что значение свойства определяется функцией геттера. (Это также приводит к тому, что значение отображает значение (...) перед запуском функции.) Это полностью отдельная проблема из перечислимости, которая приводит к исчезновению имен. Вы можете иметь курсивные свойства, определяемые getter, которые не выцветли неперечислимые свойства, и наоборот.

Ответ 2

Я не смог найти в документации какое-либо официальное объяснение, но у меня есть хорошее предположение, основанное на некоторых тестах, в которых серыми атрибутами являются те, которые по умолчанию установлены/установлены механизмом Javascript, а не самим кодом. Вот несколько примеров:

length в массиве

var foo = [1,2,3,45,1337];
console.dir(foo);

Дает в консоли:

Обратите внимание, что индексы не выделены серым цветом, но length и все в __proto__.

прототипирования

Код https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype#Examples

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);

Дает в консоли:

Здесь много интересного. Все экземпляры greet не выделены серым цветом. Однако везде __proto__ выделено серым цветом (возможно, потому, что он установлен его прототипом). Также переопределенный конструктор из Person выделен серым цветом, но явно установленный конструктор Employee не выделен серым цветом.

Итак, я думаю, что здесь есть грубая картина, которая заключается в том, что Chrom (e/ium) выделяет свойства, которые, по его мнению, будут меньше подвержены заботе, потому что они были унаследованы или установлены движком как конструкцию языка, но кажется, что он не идеален. (Но кто такой, правда?) Еще одна интересная вещь - F12 и введите console.dir(window). Там вы увидите почти все серые, за исключением вещей, помещенных в глобальное пространство имен на веб-сайте Javascript.