ES6类中同名字段与访问器未触发递归的原因探究

我正在使用webpack-dev-server开发待办事项应用，目标是加深对访问器行为的理解，以规范类的编写风格。以下是定义的User类代码：

export class User {
    name; //public field

    constructor(name, id = crypto.randomUUID(), xp = 0) {
        this.id = id;
        this.name = name;
        Object.assign(this, createExpHolder(xp), createProjectHolder(), createTaskHolder());
    }

    get name() {
        return this.name;
    }

    set name(name) {
        this.name = name;
    }
}

实例化代码及运行结果：

const user = new User("StackOverflow");
console.log(user.name); //prints StackOverflow and no errors

乍一看这段代码应该会因栈溢出报错，但实际运行却正常，修改实例的name属性也不会触发错误。这是因为dev server、webpack的处理，还是JavaScript引擎的特性？

我查阅了MDN资料并咨询相关技术人员，得到的方案是使用私有字段或下划线命名法，但我希望规范类写法，担心习惯当前写法会产生技术债务。

问题原因 #

这是JavaScript类字段与原型访问器的优先级规则导致的：

• 类顶部声明的name;是类公共字段，会在实例创建时直接在实例对象上生成一个自有属性；
• 类中定义的get name()/set name()是挂载在类的原型对象上的访问器。

当访问或设置user.name时，JavaScript会优先读取实例自身的自有属性，完全不会触发原型上的访问器方法。这就解释了为什么没有出现递归调用导致的栈溢出——你的get/set代码根本没被执行到。

规范写法建议 #

如果想让访问器逻辑生效（比如后续需要对name做校验、转换），同时避免递归，必须用独立的存储字段与访问器关联：

方案1：使用私有字段（推荐，真正的封装）

export class User {
    #name; // 私有字段，仅类内部可访问

    constructor(name, id = crypto.randomUUID(), xp = 0) {
        this.id = id;
        this.#name = name;
        Object.assign(this, createExpHolder(xp), createProjectHolder(), createTaskHolder());
    }

    get name() {
        return this.#name;
    }

    set name(name) {
        // 可在此添加校验逻辑，比如判断name是否为空
        if (!name.trim()) throw new Error("用户名不能为空");
        this.#name = name;
    }
}

方案2：下划线前缀约定（社区通用规范，伪私有）

如果环境不支持私有字段（旧版JS引擎），可以用下划线前缀标记内部字段，通过社区约定避免外部直接访问：

export class User {
    _name; // 约定为类内部使用的字段，外部不应直接操作

    constructor(name, id = crypto.randomUUID(), xp = 0) {
        this.id = id;
        this._name = name;
        Object.assign(this, createExpHolder(xp), createProjectHolder(), createTaskHolder());
    }

    get name() {
        return this._name;
    }

    set name(name) {
        this._name = name;
    }
}

关于技术债务的说明 #

你当前的写法确实存在技术风险：表面上定义了访问器，但实际完全没起作用。如果后续需要在name的读写逻辑中添加额外处理（比如格式校验、日志记录），会发现修改访问器代码后毫无效果，因为所有操作都直接指向实例的自有属性，绕过了访问器。这种隐性的逻辑失效会给后期维护带来不必要的麻烦，建议尽早调整为规范写法。

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