私はvuev2を使用してSPAを作成しています。vueコンポーネントのスクリプトセクションで次のようなOfferクラスを宣言しました。
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);
}
}
TariffとTariffCopyは、同じコンポーネントのスクリプトセクションでも宣言されているTariffと呼ばれるカスタムクラスから初期化されたオブジェクトです。基本的にこれらには同じ値が含まれますが、Tariffは値の変更に対してオープンであり、BaseTariffの値は変更されません。
class Tariff{
constructor(provAufwand) {
this.provAufwand = provAufwand;
}
}
どこ
provAufwand= {
SO: 1,
HO5: 2,
HO10: 3,
HO20: 4
}
呼び出すときOffer.changeSAC(p1,p2)（P1、P2は経由して数入力にバインドされているv-model="p1"とv-model="p2"）の値がthis.BaseTariff.provAufwand.SO、私はコードでそれを変えることはありませんが、あまりにも、変更されました。何故ですか？私のコードのどこに接続されていますか？
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関数に、引数をされ、参照によって渡されます。
これは、関数内のオブジェクト/配列の値を変更すると、関数外の同じオブジェクト/配列の値に影響することを意味します。
これを解決するには、新しいオブジェクトを作成するspread syntaxときに渡すprovAufwandときにを使用できTariffます。
const provAufwand= {
SO: 1,
HO5: 2,
HO10: 3,
HO20: 4
};
const tarrif = new Tariff({...provAufwand});
const tarrifCopy = new Tariff({...provAufwand});
これにより、クラスインスタンスを作成するときに完全に異なるオブジェクトを渡すことが保証されます。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加