Question

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

我想收到一个带有我的对象构造函数

默认值的析构参数对象

所以我做的就是这个

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;

是否有更优雅的方法来添加具有默认值的结构化参数，该参数会自动附加到＆＃34;这个。＆＃34;

Answer 1

我个人认为您当前的方法最具可读性，但您在技术上也可以做到

<>

Answer 2

我遵循更多功能样式以避免对象创建new和this关键字。

说明

你可以简单地编写一个返回object的函数，并使用默认值取几个参数感谢object literal property value shorthand你写的更少。

代码

＆＃13;

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

＆＃13;

Answer 3

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

＆＃13;

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"

＆＃13;

您丢失了参数名称，但可以认为这样做更好，以便在您想要改变对象属性时不会意外地改变参数。

Answer 4

如果目标是使用变量名称一次，那么这就是我要做的事情：

＆＃13;

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

＆＃13;

现在，您只需要更新defaults对象即可。

实际上，让我们通过抽象这个模式来构建一个构造函数构造函数：

＆＃13;

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

＆＃13;

现在，您可以轻松地创建任意数量的构造函数。

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

4 个答案:

说明

代码