如何区分类的get、set访问器与构造属性及Chrome控制台隐藏字段

1. get/set访问器属性与构造函数定义属性的区别 #

两者核心差异可以从三个维度区分：

• 绑定对象不同：构造函数中通过this.xxx赋值的属性是直接绑定到实例本身的自有属性，每个实例的该属性互相独立。而get/set访问器是定义在类的prototype原型对象上的属性描述符，所有实例共享这一组访问器逻辑。
• 读写逻辑不同：普通实例属性仅做单纯的存值/取值操作，读写时不会触发额外逻辑。访问器属性在被读取时会自动执行对应的get函数、返回函数的执行结果，被赋值时会自动执行对应的set函数，支持自定义校验、计算、副作用等逻辑，和你示例中set方法加长度校验的用法一致。
• 枚举表现不同：默认情况下构造函数定义的普通属性是可枚举的，调用Object.keys(实例)会返回这些属性；访问器属性默认在原型上不可枚举，不会出现在实例的可枚举属性列表中。

2. Chrome控制台中显示的"隐藏字段argument1"说明 #

你看到的不是实例本身的隐藏字段，是Chrome开发者工具的调试优化效果：控制台会自动把原型链上的访问器属性的执行结果预览展示在实例层级，方便开发者快速查看，不需要手动展开原型链查找访问器。
你可以通过以下代码验证属性归属：

class ClassName {
  constructor(argument1) {
    this._argument1 = argument1;
  }

  get argument1() {
    return this._argument1 + " by get method.";
  }

  set argument1(value) {
    if (value.length < 4) {
      console.log("Please provide name with more length.");
      return;
    }
    this._argument1 = value;
  }
}

let object1 = new ClassName("abcde");

// 校验自有属性
console.log(Object.hasOwn(object1, '_argument1')); // 输出true，为实例自有属性
console.log(Object.hasOwn(object1, 'argument1')); // 输出false，不属于实例自有属性
// 校验访问器归属
console.log(Object.hasOwn(ClassName.prototype, 'argument1')); // 输出true，访问器定义在原型上

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