使用參數解構從構造函數默認值設置javascript對象屬性

Question

關於ES6解構這個javascript對象構造函數中的默認用法，這是一個棘手的問題。

我想收到一個具有我的對象構造函數的默認值的destructured參數對象

所以我做的就是這個

function bla({a=3,b=6}={}){
  this.a=a;
  this.b=b;
  console.log(`this.a::'${this.a}' this.b::'${this.b}' a::'${a}' b::'${b}'`);
}

let myObject= new bla({a:1});
console.log(`myObject.a::'${myObject.a}' myObject.b::'${myObject.b}'`); // only a got overriden with value "1" and b remained its defauly value "6"

我知道我做了什么。 但是，您可以看到這有點代碼味道，因為每次我需要向構造函數添加新參數（例如{newParameter = 3}）時，我還需要向下添加一個匹配的行，如下所示在構造函數體中

this.newParameter=newParameter;

有沒有更優雅的方法來添加一個自動附加到“this”的默認值的析構參數。

Answer 1

我個人認為你目前的方法是最具可讀性的，但你在技術上也可以做到

function bla(obj = {}){
  ({
    a: this.a = 3,
    b: this.b = 6,
  } = obj);

  console.log(`this.a::'${this.a}' this.b::'${this.b}'`);
}

Answer 2

我遵循更多的功能樣式，以避免new的對象創建和this關鍵字。

說明

您可以簡單地編寫一個返回object的函數，並使用默認值獲取多個參數。
感謝對象文字屬性值的簡寫，你可以少寫。

碼

 function returnObject(a = 1, b = 2, c = 3) { return { a, b, c } } console.log(returnObject()) 

Answer 3

不知道這是否最好，但您可以使用Object.assign 。

 function bla(props={}) { Object.assign(this, {a:3,b:6}, props); console.log(`this.a::'${this.a}' this.b::'${this.b}'`); } let myObject= new bla({a:1}); console.log(`myObject.a::'${myObject.a}' myObject.b::'${myObject.b}'`); // only a got overriden with value "1" and b remained its defauly value "6" 

您丟失了參數名稱，但可以認為這樣做更好，以便在您想要改變對象屬性時不會意外地改變參數。

Answer 4

如果目標是使用變量名稱一次，那么這就是我要做的：

 const foo = new Foo({ a: 1 }); console.log(`foo { a: ${foo.a}, b: ${foo.b} }`); function Foo(config = {}) { const defaults = { a: 3, b: 6 }; for (const [key, val] of Object.entries(defaults)) ({ [key]: this[key] = val } = config); } 

現在，您只需要更新defaults對象即可。

---

實際上，讓我們通過抽象這個模式來構造一個構造函數構造函數：

 const Foo = defcons({ a: 3, b: 6 }); const foo = new Foo({ a: 1 }); console.log(`foo { a: ${foo.a}, b: ${foo.b} }`); function defcons(defaults) { return function (config = {}) { for (const [key, val] of Object.entries(defaults)) ({ [key]: this[key] = val } = config); }; } 

現在，您可以輕松地創建任意數量的構造函數。