JavaScript类未声明对应类字段时出现too much recursion错误的原因是什么

没有声明name类字段时递归报错的原因 #

• 你定义的get name()、set name()属于类的原型属性，挂载在client.prototype对象上，不属于实例自身的属性。
• 实例化执行this.name = name赋值时，新创建的实例自身没有名为name的自有属性，JS会沿着原型链向上查找name的赋值规则，匹配到原型上的set name方法并触发执行。
• setter内部又执行了this.name = val，此时实例自身依旧没有name的自有属性，会再次触发原型上的setter，形成无限递归，最终抛出栈溢出错误。

声明name = null类字段后不再报错的原因 #

• ES规范中公共类字段的初始化时机早于constructor执行，会直接给新生成的实例添加一个自有数据属性name，初始值为null。
• 此时constructor执行this.name = name赋值时，JS会优先匹配实例自身的name数据属性，直接赋值，不会再向上查找原型上的setter方法，自然不会触发递归逻辑。
• 补充说明：这种场景下你声明的get name()和set name()已经完全失效，只要实例自身存在同名的自有数据属性，访问/赋值name都不会触发原型上的访问器方法。

正确的访问器写法参考 #

如果需要保留name的get/set逻辑，应该用不同名的内部属性存储实际值，避免命名冲突，推荐用私有字段实现：

class Client {
  // 私有字段存实际值，和访问器名称不冲突
  #name = null
  constructor(name){
    this.name = name
  }
  get name() {
    return this.#name
  }
  set name(val) {
    this.#name = val
  }
}

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