如何将javascript类构造函数参数动态映射到实例属性

我正在构建一个Node.js应用程序（Node v10.11.0），并希望在不使用Typescript的情况下以面向对象的方式完成它。所以我构建了一些类似这样的类：

class Component {
  constructor(param1, param2, param3) {
    this.param1= param1;
    this.param2 = param2;
    this.param3 = param3;
  }
}

constructor(param1, param2, param3) {
  Array.from(arguments).forEach(arg => {
    this[arg] = arg;
  }
}

new Component({param1: "arg1", param2: "arg2", param3: "arg3"});

我想知道javascript中是否有一种方法可以自动映射构造函数的参数，而无需为每个构造函数参数编写

this.param1=param1

我已经试过用类似这样的东西运行

参数
对象：

class Component {
  constructor(param1, param2, param3) {
    this.param1= param1;
    this.param2 = param2;
    this.param3 = param3;
  }
}

constructor(param1, param2, param3) {
  Array.from(arguments).forEach(arg => {
    this[arg] = arg;
  }
}

new Component({param1: "arg1", param2: "arg2", param3: "arg3"});

但这不起作用。这种方法的结果是：

console.log(new Component("arg1", "arg3", "arg3"))

// Component { arg1: "arg1", arg2: "arg2", arg3: "arg3" }
// I want to have this:
// Component { param1: "arg1", param2: "arg2", param3: "arg3" }

如果你想让构造函数接受离散参数，没有什么比你已经在做的单个赋值更好的了，至少现在是这样

您可以让构造函数接受一个对象，这样可以执行以下操作：

constructor(args) {
    Object.assign(this, args);
}

你这样称呼它：

class Component {
  constructor(param1, param2, param3) {
    this.param1= param1;
    this.param2 = param2;
    this.param3 = param3;
  }
}

constructor(param1, param2, param3) {
  Array.from(arguments).forEach(arg => {
    this[arg] = arg;
  }
}

new Component({param1: "arg1", param2: "arg2", param3: "arg3"});

但是，如果只是一到三个参数，那么在每个调用站点上都会产生额外的工作，而不是在构造函数代码中创建一次，而且构造函数代码也不太清晰

第三个选项是接受rest参数：

constructor(...args) {
    ["param1", "param2", "param3"].forEach((name, index) => {
        this[name] = args[index];
    });
}

你用正常的方式称之为，但同样，虽然它是主观的，但对我来说，可读性受到了损害


作为旁注，我想你们可能知道，TypeScript有这个特性。现在越来越普遍地使用TypeScript（它可以编译成JavaScript在浏览器上使用）。TypeScript与Angular无关，您可以将其用于任何框架（或无框架）

例如，在TypeScript中：

// TypeScript
class Component {
    constructor(
        public param1: string,
        public param2: string,
        public param3: string
    ) {
    }
}

构造函数中根本不需要代码，TypeScript会自动将这些参数值分配给这些公共属性。（您也可以使用
private
或
protected
）
如果您希望构造函数接受离散参数，那么没有什么比您已经在执行的单个赋值更好的了，至少现在是这样

您可以让构造函数接受一个对象，这样可以执行以下操作：

constructor(args) {
    Object.assign(this, args);
}

你这样称呼它：

class Component {
  constructor(param1, param2, param3) {
    this.param1= param1;
    this.param2 = param2;
    this.param3 = param3;
  }
}

constructor(param1, param2, param3) {
  Array.from(arguments).forEach(arg => {
    this[arg] = arg;
  }
}

new Component({param1: "arg1", param2: "arg2", param3: "arg3"});

但是，如果只是一到三个参数，那么在每个调用站点上都会产生额外的工作，而不是在构造函数代码中创建一次，而且构造函数代码也不太清晰

第三个选项是接受rest参数：

constructor(...args) {
    ["param1", "param2", "param3"].forEach((name, index) => {
        this[name] = args[index];
    });
}

你用正常的方式称之为，但同样，虽然它是主观的，但对我来说，可读性受到了损害


作为旁注，我想你们可能知道，TypeScript有这个特性。现在越来越普遍地使用TypeScript（它可以编译成JavaScript在浏览器上使用）。TypeScript与Angular无关，您可以将其用于任何框架（或无框架）

例如，在TypeScript中：

// TypeScript
class Component {
    constructor(
        public param1: string,
        public param2: string,
        public param3: string
    ) {
    }
}

构造函数中根本不需要代码，TypeScript会自动将这些参数值分配给这些公共属性。（您也可以使用
private
或
protected
）
因为您要将对象作为参数传递，所以可以使用

示例代码片段


类组件{
构造函数（args）{
Object.keys（args）.forEach（argKey=>this[argKey]=args[argKey]）
}
}
设a=新组件（{param1:“arg1”，param2:“arg2”，param3:“arg3”}）
console.log（a）
由于您将对象作为参数传递，因此可以使用

示例代码片段


类组件{
构造函数（args）{
Object.keys（args）.forEach（argKey=>this[argKey]=args[argKey]）
}
}
设a=新组件（{param1:“arg1”，param2:“arg2”，param3:“arg3”}）
console.log（a）
这样做没有任何好处。这不会对性能造成任何影响，也会使阅读变得更加困难。这并没有什么好处。它不会对性能造成任何影响，也会使读取变得更加困难。或者只是
Object.assign（这个，args）
，正如T.J.的回答中已经提到的，或者只是
Object.assign（这个，args）
正如T.J.的回答中已经提到的，因为显然没有办法像我想的那样做到这一点，所以我感谢您的详细建议。我需要编写的构造函数需要接受8到10个参数。因此，我想知道是否有一种类似Angular
构造函数（private param1，public param2，…{}
的方法将所有参数分配给属性。@MaKobi-是的，很遗憾，这是一种类型脚本功能，而不是JavaScript功能。当然，你可以使用打字脚本。。。（TypeScript与Angular无关。）@MaKobi-我应该注意，按照惯例，一旦超过三个参数（或者可能多达四个或五个），就应该切换到选项对象，而不是上面的第一个示例。主要不是为了减少构造器中的代码，而是为了使调用站点能够保持事情的直截了当。因为显然没有办法像我想做的那样做到这一点，我感谢您的详细建议。我需要编写的构造函数需要接受8到10个参数。因此，我想知道是否有一种类似Angular
构造函数（private param1，public param2，…{}
的方法将所有参数分配给属性。@MaKobi-是的，很遗憾，这是一种类型脚本功能，而不是JavaScript功能。当然，你可以使用打字脚本。。。（TypeScript与Angular无关。）@MaKobi-我应该注意，按照惯例，一旦超过三个参数（或者可能多达四个或五个），就应该切换到选项对象，而不是上面的第一个示例。这主要不是为了减少构造函数中的代码，而是为了使调用站点保持事情的直截了当。