帶有命名參數的構造函數？

所以我一直在尋找，當我發現我可以使命名參數是這樣的：帶有命名參數的構造函數？

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?

其實，代碼的第二部分給了我下面的錯誤中鉻49：Uncaught TypeError: foo is not a constructor。

我的意思，看樣子foo是一個構造函數，爲什麼不能我只是做與foos不同的名稱81種性質，包含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>

來源

2016-04-14 Julian Avar

我不認爲'bar'是你希望它是什麼。也許你想'new foo（{x：「x」}）'？ – Bergi

您確定您在第一個代碼塊中有正確的呼叫嗎？我得到一個語法錯誤，我必須寫'boo（{first：「two」，second：「five」}）; ' – Barmar

@Cory，是的，謝謝你指出，排字錯誤 –

您必須以與將對象作爲參數調用常規函數相同的方式調用構造函數。

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

<div id="result"></div>

來源

2016-04-14 01:19:42 Barmar

你試過了嗎？我只是這樣做，我得到了相同的錯誤 –

是的，我試過了，沒有錯誤。點擊運行代碼片段，然後查看。 – Barmar

抱歉給我帶來的不便，我編寫的虛擬代碼有效，但是當我嘗試將它應用於更大的概念（更多變量）時，它不再有效 –

帶有命名參數的構造函數？

回答

相關問題