javascript - 如何在要更新子对象中的单个参数的地方将 2 个对象合并在一起

Question

更新
由于发布了这个问题以及某人在下面的评论中提供的链接，$.extend 方法只深入了一层，这解释了我遇到的问题。使用下面链接中提到的解决方案将解决问题。

如何深度合并而不是浅合并？

---

作为我为我的内部系统构建的 javascript 工具的一部分，我接受一个对象作为类的参数。提供的对象使用$.extend() Jquery 方法与默认设置对象合并。默认设置对象包含类的每个选项，其中包含用于自定义之类的嵌套对象。

我遇到的问题是，如果用户更新嵌套对象中的参数，它似乎会完全覆盖第一个嵌套对象，而不是仅仅覆盖他们在通过$.extend()方法运行时更改的参数。我怎样才能做到这一点，以便用户可以在创建类的实例期间更改嵌套对象中的参数，同时保留该嵌套对象中的其他参数？

默认设置对象如下：

{
        "container": "stepperContainer",
        "customization": {
            "stepper": {
                "id": "stepperProgress",
                "classes": "container my-3",
                "show": false
            }
       }

};

我提供的设置对象：

{
        "customization": {
            "stepper": {
                "show": false
            }
}

然后我在类中使用$.extend()方法：

class Stepper {

  defaultSettings() {
  
    return {
      "customizations": {
        "stepper": {
          "id": "stepperProgress",
          "classes": "container my-3",
          "show": true
        }
      }
    };
  }

  constructor(data) {
    this.settings = $.extend(this.defaultSettings(), data);
  }

}

stepper = new Stepper({
  "customizations": {
    "stepper": {
      "show": false
    }
  }
});

console.log(stepper.settings);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

标签： javascriptjqueryobjectmerging-data