更新
由于发布了这个问题以及某人在下面的评论中提供的链接,$.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>