使用参数解构从构造函数默认值设置 javascript 对象属性

Question

关于在 javascript 对象构造函数中使用默认用法的 ES6 解构，这是一个有点棘手的问题。

我想接收一个具有默认值的解构参数对象，用于我的对象构造函数

所以我所做的就是这个

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

我更多地遵循函数式风格，以避免在对象创建时使用 new 和 this 关键字。

说明

您可以简单地编写一个函数来重新调整 object 并接受多个具有默认值的参数。
多亏了 object literal property value shorthand 你写的东西少了。

代码

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

console.log(returnObject())

Answer 2

不知道这是否最好，但您可以使用 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 3

我个人认为你目前的做法是最可读的，但你在技术上也可以做到

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

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

Answer 4

如果 objective 只使用一次变量名，那么我会这样做：

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);
    };
}

现在，您可以根据需要轻松创建任意数量的此类构造函数。

使用参数解构从构造函数默认值设置 javascript 对象属性

setting javascript object properties from constructor default values using parameter destructuring

javascript

constructor

default

destructuring

ecmascript-6

说明

代码