我在 JavaScript 中有一个类...
class MyClass{
static createElement(selector, settings = {
name : 'element',
enabled : true,
color : '#EAEAEA'
}){
name = settings.name;
enabled = settings.enabled;
color = settings.color;
// Do something...
}
static destroyElement(selector){
// Do something...
}
}
使用两种静态方法,一种用于创建元素,另一种用于销毁它们。这两种方法都接收对象选择器作为第一个参数,而要创建的方法接收对象配置的第二个可选参数。
因此,假设应允许以下配置:
MyClass.createElement(selector); // If you want to create an element with the default settings. (name: 'element', enabled: true and color: '#EAEAEA')
MyClass.createElement(selector, { name : 'element1' }); // A new element is created independent of the previous one but with the same configurations, it only changes the name.
MyClass.createElement(selector, { // Another independent element that changes the name and is deactivated, but that keeps the default color #EAEAEA
name : 'element2',
enabled : false
});
问题出在哪里?如果我创建一个元素,默认情况下保留settings
参数,一切正常,但是如果我创建一个对象并更改settings
参数之一......
...createElement(selector, { name : 'element1' });
然后,当其他参数(启用和颜色(应保留其默认值(true 和 #EAEAEA(并且仅应更改 name
的值时,其他参数(启用和颜色(获取值 undefined
第二个参数是完全替换的对象,而不是合并它。
这样做呢:
static createElement(selector, settings = {}){
settings = {
// here is your default settings
name : 'element',
enabled : true,
color : '#EAEAEA',
// merging the parameter
...settings
}
name: settings.name,
enabled: settings.enabled,
color: settings.color,
}