解构嵌套JavaScript对象时如何覆盖默认值？类构造函数问题

你的核心问题在于：嵌套对象解构的前提是父级属性必须是可解构的对象/数组，当传入的prop1是字符串这类原始值时，解构prop1: { ... }会静默失败，转而使用你指定的默认值this.prop1（也就是初始的空对象），最终导致prop1被重置为默认的嵌套对象，而非传入的字符串。

单纯靠对象解构无法直接实现你要的“既支持嵌套对象合并默认值，又允许非对象值覆盖父级属性”的需求，必须结合类型判断来区分处理逻辑。

修正后的代码实现 #

这里提供两种清晰的实现方式，都能满足你的需求：

方式一：先解构基础属性，再单独处理嵌套/非嵌套场景 #

class MyClass {
  constructor(args = {}) {
    // 处理顶层属性的默认值
    const { type = 'default', prop1 } = args;
    this.type = type;

    // 判断prop1的类型，决定是合并默认值还是直接赋值
    if (typeof prop1 === 'object' && prop1 !== null) {
      // 传入的是对象，合并默认值
      this.prop1 = {
        value1: 'one',
        value2: 'two',
        value3: 'three',
        ...prop1
      };
    } else {
      // 传入的是非对象类型，直接赋值；未传入则用默认对象
      this.prop1 = prop1 ?? {
        value1: 'one',
        value2: 'two',
        value3: 'three'
      };
    }
  }
}

方式二：保留部分解构逻辑，结合类型判断 #

class MyClass {
  constructor(args = {}) {
    this.type = args.type ?? 'default';
    
    // 先获取传入的prop1值
    const inputProp1 = args.prop1;
    if (typeof inputProp1 === 'object' && inputProp1 !== null) {
      // 是对象的话，用解构合并默认值
      const {
        value1 = 'one',
        value2 = 'two',
        value3 = 'three'
      } = inputProp1;
      this.prop1 = { value1, value2, value3 };
    } else {
      // 非对象直接赋值，无传入则用默认对象
      this.prop1 = inputProp1 ?? {
        value1: 'one',
        value2: 'two',
        value3: 'three'
      };
    }
  }
}

测试验证 #

• 当传入嵌套对象时：

  new MyClass({ type: 'myclass', prop1: { value1: 1 } });
  

  结果符合预期：

  {
    type: 'myclass',
    prop1: { value1: 1, value2: 'two', value3: 'three' }
  }
  

• 当传入非对象值时：

  new MyClass({ type: 'myclass', prop1: 'myProp1' });
  

  结果符合预期：

  {
    type: 'myclass',
    prop1: 'myProp1'
  }
  

• 未传入prop1时，会使用默认的嵌套对象：

  new MyClass({ type: 'myclass' });
  

  结果：

  {
    type: 'myclass',
    prop1: { value1: 'one', value2: 'two', value3: 'three' }
  }
  

总结 #

嵌套对象解构仅适用于父级属性确定为对象的场景，一旦需要支持父级属性被非对象值覆盖，就必须加入类型判断逻辑，区分“合并默认值”和“直接赋值”两种场景，无法仅靠解构语法实现。

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