如何將 javascript 類構造函數參數動態映射到實例屬性

Question

我正在構建一個 Node.js 應用程序（Node v10.11.0）並希望在不使用 Typescript 的情況下以 OOP 方式完成它。 所以我建立了一些這樣的類：

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

我想知道javascript中是否有一種方法可以自動映射構造函數的參數，而無需為每個構造函數參數編寫this.param1 = param1 。

我已經嘗試過用這樣的東西運行arguments對象：

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

但這不起作用。 這種方法的結果是：

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" }

Answer 1

如果您希望構造函數接受離散參數，那么沒有什么比您已經在進行的單個賦值更好的了，至少目前是這樣。

你可以讓構造函數接受一個對象，這樣你就可以這樣做：

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

你這樣稱呼它：

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

但是如果它只是一到三個參數，那就是在每個調用點創建額外的工作，而不是在構造函數代碼中創建一次，並且構造函數代碼不太清楚。

第三種選擇是接受休息參數：

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 。）

Answer 2

由於您將對象作為參數傳遞，因此您可以使用Object.keys

示例代碼段

 class Component { constructor(args) { Object.keys(args).forEach(argKey => this[argKey] = args[argKey]) } } let a = new Component({param1: "arg1", param2: "arg2", param3: "arg3"}) console.log(a)