JavaScript类属性Setter实现问题：避免覆盖Element对象

我明白你遇到的问题了——你想让类里的那些Element类型属性始终保持Element实例，而不是被赋值的字符串直接替换掉对吧？这是因为默认的属性赋值会直接覆盖属性引用，咱们只需要给这些属性自定义getter和setter就能解决。先还原一下你的代码场景，然后给你两种实用解决方案：

'use strict';
const assert = require('chai').assert;

class Element {
  constructor() {
    this.value = null; // 假设Element内部用value属性存具体值
  }
}

class Record {
  constructor() {
    this.foo = new Element();
    this.bar = new Element();
  }
}

const record1 = new Record();
record1.foo = 'bar'; 
// 问题就在这：record1.foo现在变成了字符串，而非原来的Element实例

如果你的属性数量不多，直接逐个定义最直观清晰：

class Record {
  constructor() {
    // 用下划线开头的变量存实际的Element实例（这是JS里约定俗成的私有变量写法）
    this._foo = new Element();
    this._bar = new Element();
  }

  // Getter：返回Element实例本身
  get foo() {
    return this._foo;
  }

  // Setter：把值写入Element内部的属性，而非替换整个实例
  set foo(newValue) {
    this._foo.value = newValue;
  }

  get bar() {
    return this._bar;
  }

  set bar(newValue) {
    this._bar.value = newValue;
  }
}

// 测试验证
const record1 = new Record();
record1.foo = 'bar';
assert.equal(record1.foo.value, 'bar'); // 成功！值被写入Element内部
assert.instanceOf(record1.foo, Element); // 确认foo还是Element实例，没被替换

如果你的Record类有一大堆Element属性，手动写太繁琐，可以在构造函数里动态批量定义：

class Record {
  constructor() {
    // 先列出所有需要绑定Element的属性名
    const elementProps = ['foo', 'bar', 'baz', 'qux'];
    
    elementProps.forEach(prop => {
      const internalProp = `_${prop}`;
      // 初始化Element实例
      this[internalProp] = new Element();
      
      // 用Object.defineProperty动态添加getter和setter
      Object.defineProperty(this, prop, {
        get: () => this[internalProp],
        set: (newValue) => {
          this[internalProp].value = newValue;
        },
        enumerable: true, // 让属性能被for...in遍历到
        configurable: true
      });
    });
  }
}

// 测试批量属性
const record1 = new Record();
record1.baz = 'hello';
assert.equal(record1.baz.value, 'hello');
assert.instanceOf(record1.qux, Element); // 未赋值的属性也保持Element实例

如果你的Element类本身就有设置值的方法（比如setValue），那在setter里调用这个方法会更符合面向对象的设计，还能顺便做值的验证或格式化：

class Element {
  constructor() {
    this._value = null;
  }

  // Element自己的赋值方法，可添加验证逻辑
  setValue(newValue) {
    if (typeof newValue !== 'string') {
      throw new Error('只能赋值字符串类型');
    }
    this._value = newValue;
  }

  getValue() {
    return this._value;
  }
}

// 对应的Record setter修改为：
set foo(newValue) {
  this._foo.setValue(newValue);
}

这样不管你怎么给record1.foo赋值，都只会操作内部的Element实例，再也不会出现被替换的问题啦。

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