如何正确实现同名getter/setter？解决栈溢出与undefined问题

要实现属性修改时的响应式逻辑，同时避免栈溢出和getter返回undefined的问题，推荐使用ES6类的私有字段（以#开头）来存储实际值，这样既能保持getter/setter与属性同名，又不会引发递归调用：

class MyClass {
  #isOn; // 声明类私有字段，仅内部可访问

  constructor() {
    this.isOn = false; // 调用setter完成初始化
  }

  get isOn() {
    return this.#isOn; // 返回私有字段的实际值，解决undefined问题
  }

  set isOn(value) {
    this.#isOn = value; // 赋值给私有字段，不会触发setter递归调用
    // 这里添加响应式逻辑，示例：
    console.log(`isOn 状态已更新为: ${value}`);
    // 其他需要同步执行的逻辑都可放在此处
  }

  turnOn() {
    this.isOn = true; // 自动触发setter，复用响应逻辑
  }

  turnOff() {
    this.isOn = false; // 同理调用setter
  }
}

关键说明 #

• 私有字段#isOn仅能在类内部访问，外部无法直接修改，既保证了数据封装性，又避免了与公共属性名的冲突。
• getter返回私有字段的值，解决了原代码中无getter导致返回undefined的问题。
• setter中直接操作私有字段#isOn，不会触发自身的setter调用，彻底解决栈溢出问题。
• 无论在类内部（turnOn/turnOff方法）还是外部修改this.isOn，都会自动执行setter中的响应式逻辑，实现了声明式的代码复用，无需在每个修改方法中重复编写逻辑。

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