Question

我想使用对象模板作为另一个对象的属性。我的模板对象如下所示

var tableDataRow ={
    numberOfFiles:parseFloat(0),
    insurerIncurred :parseFloat(0),
    insuredIncurred :parseFloat(0),
    totalIncurred :parseFloat(0)
};

我正在使用这个对象

var tableData ={
    firm1 :tableDataRow,
    firm2:tableDataRow,
    firm3:tableDataRow,
    firm4:tableDataRow
};

但是当我想更改tableDataRow对象中的属性值时，tableData中的所有值都在变化。

tableData.firm1.numberOfFiles = 2;
tableData.firm2.insurerIncurred = 3;
tableData.firm3.insuredIncurred = 4;
tableData.firm4.totalIncurred = 5;

我认为我可以使用类似面向对象的语言，但我认为这样我只将tableDataRow的引用放在另一个对象中。我怎么能这样做？

https://jsfiddle.net/0ta0wkho/

Answer 1

对象是通过引用传递的，因为你的结构很简单，你可以放弃做这样的事情JSON.parse(JSON.stringify(tableDataRow))，它会创建一个与原始对象结构相同的新对象，或者你可以有一个返回该结构的函数;如果它让你更清洁。

这里有一个fork of your fiddle，如果它更清楚

有一个功能：

function cloneme(originalObject) {
  return JSON.parse(JSON.stringify(originalObject));
}

并指定如下：

var tableData = {
  firm1: cloneme(tableDataRow),
  firm2: cloneme(tableDataRow),
  firm3: cloneme(tableDataRow),
  firm4: cloneme(tableDataRow)
};

我们正在使用该结构的新副本。

Answer 2

这里所有字段都指的是同一个对象您可以将对象的克隆分配给tableData对象的字段。

更正后的代码

var tableDataRow = {
  numberOfFiles: parseFloat(0),
  insurerIncurred: parseFloat(0),
  insuredIncurred: parseFloat(0),
  totalIncurred: parseFloat(0)
};

var tableData = {
  firm1: Object.assign({}, tableDataRow),
  firm2: Object.assign({}, tableDataRow),
  firm3: Object.assign({}, tableDataRow),
  firm4: Object.assign({}, tableDataRow),
};

tableData.firm1.numberOfFiles = 2;
tableData.firm2.insurerIncurred = 3;
tableData.firm3.insuredIncurred = 4;
tableData.firm4.totalIncurred = 5;

console.log(tableData);

您可以为TableDataRow编写构造函数，并将其实例分配给所有字段

以下是其中一种方法

function TableDataRow() {
  this.numberOfFiles = parseFloat(0),
    this.insurerIncurred = parseFloat(0),
    this.insuredIncurred = parseFloat(0),
    this.totalIncurred = parseFloat(0)
};

var tableData = {
  firm1: new TableDataRow(),
  firm2: new TableDataRow(),
  firm3: new TableDataRow(),
  firm4: new TableDataRow()
};

tableData.firm1.numberOfFiles = 2;
tableData.firm2.insurerIncurred = 3;
tableData.firm3.insuredIncurred = 4;
tableData.firm4.totalIncurred = 5;

console.log(tableData);

Answer 3

您可以将tableDataRow作为返回模板对象的函数。这样，您可以在将其分配给tableData.firm1时使用其单个实例，依此类推。

var tableDataRow = function(){
    return {
      numberOfFiles:parseFloat(0),
      insurerIncurred :parseFloat(0),
      insuredIncurred :parseFloat(0),
      totalIncurred :parseFloat(0)
    }
};
var tableData ={
    firm1: new tableDataRow,
    firm2: new tableDataRow,
    firm3: new tableDataRow,
    firm4: new tableDataRow
};

tableData.firm1.numberOfFiles = 2;
tableData.firm2.insurerIncurred = 3;
tableData.firm3.insuredIncurred = 4;
tableData.firm4.totalIncurred = 5;

console.log(tableData);

Answer 4

您应首先克隆该对象，因为javascript传递对象是引用。试试这段代码：

function clone(obj) {
if (null == obj || "object" != typeof obj) return obj;
var copy = obj.constructor();
for (var attr in obj) {
    if (obj.hasOwnProperty(attr)) copy[attr] = obj[attr];
}
return copy;
}
var tableDataRow ={
numberOfFiles:parseFloat(0),
insurerIncurred :parseFloat(0),
insuredIncurred :parseFloat(0),
totalIncurred :parseFloat(0)
};

var tableData ={
firm1 :clone(tableDataRow),
firm2:clone(tableDataRow),
firm3:clone(tableDataRow),
firm4:clone(tableDataRow)
};

tableData.firm1.numberOfFiles = 2;
tableData.firm2.insurerIncurred = 3;
tableData.firm3.insuredIncurred = 4;
tableData.firm4.totalIncurred = 5;

console.log(tableData);

使用object作为另一个对象的属性

4 个答案: