我正在使用vue v2创建SPA。 我在vue组件的脚本部分中声明了一个Offer类,如下所示:
<iostream>
Tariff和TariffCopy是从称为Tariff的自定义类初始化的对象,该类也在同一组件的脚本部分中声明。基本上它们包含相同的值,但“关税”可以接受值的更改,而“基础关税”的值应保持不变。
class Offer {
constructor(Tariff, TariffCopy, billing, at, fa, backs) {
this.Tariff = Tariff;
this.BaseTariff = TariffCopy;
}
changeSAC(p1, p2) {
...
this.Tariff.provAufwand.SO = this.BaseTariff.provAufwand.SO + Number(p1);
}
}
其中
class Tariff{
constructor(provAufwand) {
this.provAufwand = provAufwand;
}
}
在调用provAufwand= {
SO: 1,
HO5: 2,
HO10: 3,
HO20: 4
}
时(p1和p2绑定到通过Offer.changeSAC(p1,p2)
和v-model="p1"
的数字输入上),v-model="p2"
的值也被更改了,尽管我从未更改过在代码中。
这是为什么?它们在我的代码中的哪里连接?
答案 0 :(得分:1)
假设您创建了Tariff
个实例,如下所示:
const provAufwand= {
SO: 1,
HO5: 2,
HO10: 3,
HO20: 4
};
const tariff = new Tariff(provAufwand);
const tariffCopy = new Tariff(provAufwand);
然后,当您更改BaseTariff
时tariffCopy
或tariff
也会更改的原因是它们引用了相同的provAufwand
对象。
将provAufwand
传递给Tariff
构造函数时,传递的参数不是对象的实际value
,而是对象的reference
。
当您向函数传递
object
或array
时,参数 已通过引用。
这意味着更改函数内部对象/数组的值会影响函数外部相同对象/数组的值。
要解决此问题,可以在创建新的provAufwand
对象时传递Tariff
时使用spread syntax
。
const provAufwand= {
SO: 1,
HO5: 2,
HO10: 3,
HO20: 4
};
const tarrif = new Tariff({...provAufwand});
const tarrifCopy = new Tariff({...provAufwand});
这可确保您在创建类实例时传递完全不同的对象。