如何保持 object 屬性默認值

Question

我想知道如何保持 object 屬性的初始值

class MyClass{
  constructor(){
     this.settings = {
         theme: 'dark',
         confirmBtn: 'ok',
         cancelBtn: 'cancel',
     }
  }
}

let obj= new MyClass();
obj.settings = {
  theme: 'white' 
}

和 confirmBtn 等其他屬性保留在 class 聲明中分配的值。

Answer 1

你有幾個選擇。

1. 只分配給一個屬性：

    obj.settings.theme = "white";

2. 如果您有 object 個要分配的屬性，請使用Object.assign （這里我只有一個屬性，但您可以有更多）：

    Object.assign(obj.settings, { theme: "white", });

   Object.assign將作為第二個參數提供的對象中的所有自己的可枚舉屬性復制到作為第一個參數提供的 object 中。

3. 在現有的obj.settings object 和新設置 object 上使用 object 傳播語法...到匿名的新 object 並將其分配給obj.settings ：

    obj.settings = {...obj.settings, ...{ theme: "white" } };

   雖然這里沒有理由這樣做，但只需更新您擁有的設置 object 即可。 在您希望避免修改現有 object（各種 MVC 庫中的狀態更新等）的情況下，此選項非常有用。

---

在自我回答中，您似乎想將賦值移動到構造函數中，而您在問題中沒有提到。 我會通過使用參數解構結合解構默認值和參數默認值（只是一個空白對象）來處理這個問題：

class MyClass {
    constructor({theme = "dark", confirmBtn = "ok", cancelBtn = "cancel"} = {}) {
        this.settings = {
            theme,
            confirmBtn,
            cancelBtn,
        };
    }
}

let obj= new MyClass({
    theme: "white",
});

現場示例：

 class MyClass { constructor({theme = "dark", confirmBtn = "ok", cancelBtn = "cancel"} = {}) { this.settings = { theme, confirmBtn, cancelBtn, }; } } // Settings not specified get defaulted const obj1 = new MyClass({ theme: "white", }); console.log(obj1.settings); // No parameter at all gets all defaults const obj2 = new MyClass(); console.log(obj2.settings);

您也可以使用Object.assign來完成它，盡管我喜歡默認值的表現力都在構造函數簽名中：

class MyClass {
    constructor(settings = {}) {
        this.settings = Object.assign(
            {},
            {
                theme: "dark",
                confirmBtn: "ok",
                cancelBtn: "cancel",
            },
            settings
        );
    }
}

let obj= new MyClass({
    theme: "white",
});

現場示例：

 class MyClass { constructor(settings = {}) { this.settings = Object.assign( {}, { theme: "dark", confirmBtn: "ok", cancelBtn: "cancel", }, settings ); } } // Settings not specified get defaulted const obj1 = new MyClass({ theme: "white", }); console.log(obj1.settings); // No parameter at all gets all defaults const obj2 = new MyClass(); console.log(obj2.settings);

Answer 2

您可以使用私有 class 功能並使用 getter 和 setter。

class MyClass{
    #settings;

    constractor(){
        this.#settings={
             theme:'dark',
             confirmBtn:'ok',
             cancelBtn:'cancel'
        }
    }

    getSettings(){
        return this.#settings;
    }

}

嘗試訪問#setting swill 會產生錯誤

Answer 3

我已經通過 JQuery $.extend 解決了我的問題：我定義了一個默認的 object 並將選項作為另一個 object 並合並它們。

class MyClass{
  constructor(options){
     this.default = {
       theme: 'dark',
       confirmBtn: 'ok',
       cancelBtn: 'cancel',
      }
      this.settings=$.extend({},this.default,options);
  }
}
let obj= new MyClass({
    theme:'dark
 });