如何将原对象上的getter方法正确复制到另一个对象中使用

问题根因 #

你遇到的问题由三个错误共同导致：

• 扩展运算符...仅能复制对象自身的可枚举数据属性，无法保留访问器属性（getter/setter）的定义：执行{ ...config[conf] }时，会直接调用一次getValue拿到当前空值作为普通属性写入新对象，后续不会再动态计算，因此永远返回空。
• 原config对象的属性引用和语法存在错误：
  1. getter定义多写了冒号，纯JS环境下会直接抛出语法错误；TS环境下冒号后需要标注返回类型，你写的{不符合语法要求。
  2. a对象的getValue返回this.valueType，但a对象本身没有定义valueType属性，自然返回undefined。
  3. c对象的getValue直接访问this.d/this.e/this.f，但这三个属性挂载在this.value下，直接访问this.d会拿到undefined，拼接后就是空字符串。
• 浅拷贝后的对象和原config对象脱离引用关系，你修改原config的属性不会同步到拷贝后的对象，无法实现ngModel动态绑定的效果。

可行实现方案 #

方案1：保留getter，使用完整属性描述符拷贝 #

如果要保留getter的写法，需要用Object.getOwnPropertyDescriptors获取完整属性定义后再拷贝，同时修正原config的错误：

// 修正后的config
var config = {
  a: {
    value: '',
    valueType: '', // 补上缺失的valueType属性
    get getValue() { // 去掉多余的冒号
      return this.valueType
    }
  },
  b: {
    value: '',
    get getValue() {
      return this.value
    }
  },
  c: {
    value: {
      d: '',
      e: '',
      f: ''
    },
    get getValue() {
      // 修正属性引用路径
      return this.value.d + " " + this.value.e + " " + this.value.f
    }
  }
}

// 修正赋值方法
assignConfig(conf) {
  // 完整复制所有属性描述，保留getter定义
  const copyConfig = Object.defineProperties({}, Object.getOwnPropertyDescriptors(config[conf]))
  array.push({
    value: copyConfig
  })
}

该方案拷贝后的对象拥有独立的内存空间，修改不会影响原config，getter会动态计算返回值，支持ngModel绑定动态更新。

方案2：将getter改为普通方法（兼容性最高） #

直接把动态取值逻辑改为普通方法，扩展运算符可以直接复制函数引用，调用时this指向当前对象，自然支持动态更新：

// 修正后的config
var config = {
  a: {
    value: '',
    valueType: '',
    getValue() {
      return this.valueType
    }
  },
  b: {
    value: '',
    getValue() {
      return this.value
    }
  },
  c: {
    value: {
      d: '',
      e: '',
      f: ''
    },
    getValue() {
      return this.value.d + " " + this.value.e + " " + this.value.f
    }
  }
}

// 原有赋值方法不需要修改
assignConfig(conf) {
  array.push({
    value: { ...config[conf] }
  })
}

使用时调用xxx.value.getValue()即可拿到最新的计算值，完全支持ngModel动态绑定。

方案3：直接引用原config对象（适用于需要同步更新原config的场景） #

如果允许修改原config，不需要隔离拷贝对象和原对象的状态，可以直接引用原config的对应项：

assignConfig(conf) {
  array.push({
    value: config[conf]
  })
}

该方案不需要修改原config的定义，数组内的对象和原config共用同一块内存，修改任意一侧都会同步更新。

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