具有命名参数的构造函数？

debugcn 发表于 Dev

朱利安·阿瓦尔（Julian Avar）

所以当我发现我可以像这样创建命名参数时，我环顾四周：

function boo({first = "one", second = "two"} = {}) {
  console.log(first + second);
}

// and then calling it

boo({first = "two", second = "five"}); // logs "twofive"
boo({first = "two"}); // logs "twotwo"
boo({second = "five"}); // logs "onefive"
boo(); // logs "onetwo"

但是像这样的构造函数呢？

function foo({x, y = "y", z = "z"} = {}) {
    this.x = x;
    this.y = y;
    this.z = z;
}

var bar = new foo("x");

console.log(bar);

// up until now, it works!

var rows = ["a","b","c","d","e","f","g","h","i"];
var cols = ["a","b","c","d","e","f","g","h","i"];

var foos = {};

for(let i = 0; i < rows.length; i++) { // make rows
    for(let j = 0; j < cols.length; j++) {
        let counter = rows[i] + cols[j];
        foos[counter] = new foo({x: counter});
    }
}

// this doesn't work for some reason?

实际上，代码的第二部分让我在Chrome 49以下错误：Uncaught TypeError: foo is not a constructor。

我的意思是，显然foo是一个构造，为什么不能我只是做用不同的名字81种性质foos，一切存在对象包含x，y和z？

编辑

上面的代码似乎可以正常工作，但是当我尝试将其应用于如下所示的较大代码时，它只是不想听：

$(function() {

  function cell({
    coords, building = "none", terrain = "soft", temperature = "25°C", humidity = "none", population = "0", money = "$0", income = "$0", production_amount = "0", production_type = "none", corruption_level = "0%", owner = "none"
  } = {}) {
    this.coords = coords;
    this.building = building;
    this.terrain = terrain;
    this.temperature = temperature;
    this.humidity = humidity;
    this.population = population;
    this.money = money;
    this.income = income;
    this.production_amount = production_amount;
    this.production_type = production_type;
    this.corruption_level = corruption_level;
    this.owner = owner;
  }

  // var cella = new cell("aa");
  //
  // console.log(cella);

  var rows = ["a", "b", "c", "d", "e", "f", "g", "h", "i"];
  var cols = ["a", "b", "c", "d", "e", "f", "g", "h", "i"];

  var cells = {};

  for (let i = 0; i < rows.length; i++) { // make rows
    for (let j = 0; j < cols.length; j++) {
      let coords = rows[i] + cols[j];
      let cell = "<div class=\"cell\" id=\"" + coords + "\"></div>";
      $("main").append(cell);
      cells[coords] = new cell({
        coords: coords
      });
    }
  }

  $("div.cell").click(function() {
    console.log(this.id);
  });

});

body {
  margin: 0;
}
main {
  width: 100vw;
  height: 100vh;
}
main div.cell {
  width: calc(100vw / 9);
  height: calc(100vh / 9);
  background-color: #9E1023;
  /*border: solid 1px black;*/
  float: left;
}
main div.cell:hover {
  background-color: #740B20;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Evalitia</title>
</head>

<body>
  <main></main>
</body>

</html>

巴尔玛

您必须以与调用常规函数相同的方式来调用构造函数，并以一个对象作为参数。

var bar = new foo({ x: "x" });

因此，for循环应为：

function foo({ x, y = "y", z = "z" } = {}) {
  this.x = x;
  this.y = y;
  this.z = z;
}
var rows = ["a", "b", "c", "d", "e", "f", "g", "h", "i"];
var cols = ["a", "b", "c", "d", "e", "f", "g", "h", "i"];

var foos = {};

for (let i = 0; i < rows.length; i++) { // make rows
  for (let j = 0; j < cols.length; j++) {
    let counter = rows[i] + cols[j];
    foos[counter] = new foo({
      x: counter
    });
  }
}

document.getElementById('result').innerHTML = JSON.stringify(foos, null, 1);