Javascript JS-向一个变量添加键会将其添加到链式赋值中创建的所有变量中

我创建了一个对象，并将其分配给3个变量，如下所示

var barChartOptions, longChartOptions, scatterOptions;
barChartOptions = longChartOptions = scatterOptions = {
    legend: {
        display: false
    },
    scales: {
        ...
    }
};

也试过

var barChartOption = longChartOptions = scatterOptions = {
    legend: {
        display: false
    },
    scales: {
        ...
    }
};

然后我尝试向其中一个变量添加一个键。该键仅特定于这一个变量，对象的其余部分对于所有变量都是相同的

longChartOptions.aspectRatio = 3;

---

现在，所有三个变量都有键

aspectRatio

。为什么会这样？我知道如果我分别定义这三个变量，问题就不会出现，但对象很长，我想保持代码干燥。

创建一个返回对象的函数，并在定义每个变量时调用该函数：

const makeOptions = () => ({
  legend: {
    display: false
  },
  scales: {
    // ...
  }
});
const barChartOptions = makeOptions(),
      longChartOptions = makeOptions(),
      scatterOptions = makeOptions();

为什么会这样

因为指定解析为指定的值。您的原始代码：

barChartOptions = longChartOptions = scatterOptions = { /* ... */ };

相当于：

scatterOptions = { /* ... */ };
longChartOptions = scatterOptions; // references same object
barChartOptions = longChartOptions; // references same object
// so in the end, scatterOptions === barChartOptions

---

每个变量名引用内存中的同一对象。将同一对象指定给不同的变量名时，不会克隆结构。

可以使用扩展运算符将对象复制到另一个变量

var barChartOption = {...longChartOptions} = {...scatterOptions} = {
    legend: {
        display: false
    },
    scales: {
      // ...
    }
};

实际上，当您使用=sign将对象复制到变量时，javascript会将对象的引用复制到该变量。所以当你改变任何一个变量时，它也会反映另一个变量

---

要解决这个问题，可以使用spread运算符或@CertainPerformance提到的过程。

问题是所有变量都指向同一个内存块。您可以使用es6 spread运算符，它将创建不同的实例

var barChartOptions, longChartOptions, scatterOptions;
{...barChartOptions} = {...longChartOptions} = {...scatterOptions} = {
    legend: {
        display: false
    },
    scales: {
        ...
    }
};

---

在javascript中，当您将一个对象设置为另一个对象时，您只创建对该对象的引用，而不是副本。