设置属性时的Javascript对象将设置所有具有相同名称的属性

Question

我最近才开始使用 javascript 和 NodeJs。我面临一个简单的问题，我发现很难在网上找到答案。我正在初始化一个包含许多产品的对象，然后每个产品都有价格和可用性。当我尝试设置一种产品的价格时，它会设置所有产品的价格，而不仅仅是我想要设置的产品的价格。我究竟做错了什么？

var ProdStruct = {
  'price' : 0,
  'available' : 0,
};
var Prods = {
  '1' : ProdStruct,
  '2' : ProdStruct,
  '3' : ProdStruct,
  '4' : ProdStruct,
  '5' : ProdStruct,
  '6' : ProdStruct,
  '6' : ProdStruct,
  '7' : ProdStruct
};
Prods['6']['price'] = 99;
console.log(Prods);

输出:

{ '1': { price: 99, available: 0 },
  '2': { price: 99, available: 0 },
  '3': { price: 99, available: 0 },
  '4': { price: 99, available: 0 },
  '5': { price: 99, available: 0 },
  '6': { price: 99, available: 0 },
  '7': { price: 99, available: 0 } }

Answer 1

您只有一个 ProdStruct 对象，您引用了七次。也就是说，你的内存中有这样的东西:

                                        +−−−−−−−−−−−−−−+ProdStruct−−−−−−−−−−−−−−+−+−+−+−+−+−+−−>|   (object)   |                       / / / / / / /    +−−−−−−−−−−−−−−+                       | | | | | | |    | price: 0     |                       | | | | | | |    | available: 0 |                       | | | | | | |    +−−−−−−−−−−−−−−+         +−−−−−−−−−−+  | | | | | | |Prods−−−>| (object) |  | | | | | | |         +−−−−−−−−−−+  | | | | | | |         | 1        |−−+ | | | | | |         | 2        |−−−−+ | | | | |         | 3        |−−−−−−+ | | | |         | 4        |−−−−−−−−+ | | |         | 5        |−−−−−−−−−−+ | |         | 6        |−−−−−−−−−−−−+ |         | 7        |−−−−−−−−−−−−−−+         +−−−−−−−−−−+

Modifying the state of that one object (changing price) modifies its state; doesn't matter which of the seven references you use to get to it to make the change or to look at the result, it's just one object.

You'd need to make a copy of the object to get the result you expect. One way is to use Object.assign:

var ProdStruct = {
  'price' : 0,
  'available' : 0,
};
var Prods = {
  '1' : Object.assign({}, ProdStruct),
  '2' : Object.assign({}, ProdStruct),
  '3' : Object.assign({}, ProdStruct),
  '4' : Object.assign({}, ProdStruct),
  '5' : Object.assign({}, ProdStruct),
  '6' : Object.assign({}, ProdStruct),
  '6' : Object.assign({}, ProdStruct),
  '7' : Object.assign({}, ProdStruct)
};
Prods['6']['price'] = 99;
console.log(Prods);

.as-console-wrapper {
  max-height: 100% !important;
}

...但我认为在你的情况下我可能只有一个构造函数:

function Prod() {
  this.price = 0;
  this.available = 0;
}
var Prods = {
  '1' : new Prod(),
  '2' : new Prod(),
  '3' : new Prod(),
  '4' : new Prod(),
  '5' : new Prod(),
  '6' : new Prod(),
  '6' : new Prod(),
  '7' : new Prod()
};
Prods['6']['price'] = 99;
console.log(Prods);

.as-console-wrapper {
  max-height: 100% !important;
}

如Rick mentioned in a comment ，您可以让该构造函数接受参数:

function Prod(price, available) {
  this.price = price || 0;
  this.available = available || 0;
}

如果您不提供 price 或 available，它将具有值 undefined，并且该代码使用常见的习惯用法 something ||默认使用0而不是undefined，利用我所说的curiously powerful || operator 。 (当 something 有效为 falsy* 值时，请小心执行此操作。)

在 ES2015 及更高版本中，您可以在参数列表中执行这些默认值:

function Prod(price = 0, available = 0) {
  this.price = price;
  this.available = available;
}

如果您没有为这些参数提供参数(或者您明确为它们提供undefined)，则将应用默认值。

* "falsy"- 在 JavaScript 中，用作 bool 值时强制为 false 的值是 falsy。假值为 0、""、null、undefined、NaN，当然还有 false。所有其他值都是真实。

<小时/>

一些旁注:

1. 在 JavaScript 中，压倒性的约定是仅对构造函数使用首字母大写的名称，而不是对引用其他内容的变量使用首字母大写的名称。所以 prodStruct 和 prods。

2. 诸如 Prods 之类的一系列事物可能会更好地作为数组 ([])，而不是具有数字命名属性的对象。

3. 仅当名称不是有效标识符或有效整数时，才需要在对象初始值设定项中将属性名称引起来的引号。您的所有属性名称都是，因此您可以省略它们。

4. 尽管 Prods['6']['price'] 可以工作，但 prods[6].price 的编写方式更加简单和惯用。