Chrome开发者工具控制台中JavaScript对象属性变灰的原因及是否为私有属性

嘿，这个问题我调试时碰到过好多次，给你掰扯清楚：

• 灰色属性的第一个常见原因：继承自原型链的属性
  控制台会用灰色区分对象自身拥有的属性和从原型链上继承来的属性。比如你创建一个空对象const obj = {}，它的toString、hasOwnProperty这些方法都是从Object.prototype继承来的，所以在控制台里会显示成灰色——目的就是让你一眼分清哪些是对象自己的，哪些是“借”来的。

• 第二个原因：不可枚举（non-enumerable）属性
  当一个属性被设置为不可枚举时，控制台也会标灰显示。比如用Object.defineProperty手动定义属性时，如果把enumerable设为false：

  const obj = {};
  Object.defineProperty(obj, 'hiddenVal', {
    value: 123,
    enumerable: false
  });
  

  这时hiddenVal在控制台里就是灰色的，而且用for...in循环或者Object.keys()也遍历不到它。另外一些内置的不可枚举属性（比如数组的length）也会是灰色的。

重点：灰色属性≠私有属性 #

很多人会把这俩搞混，但完全是两码事：

• 私有属性是ES6+的类私有字段，用#前缀定义，比如：

  class User {
    #password = '123456';
    getName() {
      return 'Alice';
    }
  }
  

  这种#password在控制台里默认是看不到的，只有在类的内部代码中才能访问，控制台不会把它标灰显示——它根本不会出现在常规的对象属性列表里（除非你在类内部打印this）。
• 而灰色属性不管是继承的还是不可枚举的，都是可以直接访问的（比如obj.toString()、obj.hiddenVal都能拿到值），只是控制台用灰色做了区分标记而已。

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