オブジェクト変異の代替方法
よく問題になるコーディング手法に、名前空間で所有されていないオブジェクトの変更があります。オブジェクトを変更するときは、オブジェクトのプロパティを追加または削除するか、プロパティの値を変更します。オブジェクトの「形状」を変更することになります。LWS で実行されているコンポーネントのオブジェクトを変更すると、その変更は名前空間の Sandbox 外に伝搬されず、エラーにつながります。
変異により、値が undefined になる可能性があります。詳細は、「LWS で undefined と評価されるプロパティ」を参照してください。
このセクションでは、次のプロパティの変異の代替方法について説明します。
- 関数引数
- クラスインスタンスプロパティ
- イベント受信オブジェクト
この例では、関数 foo() は値 foo のプロパティを追加することで引数 obj を変更します。次に foo() は、prop = foo が obj で定義されていることが必要な otherFunction をコールします。
foo() はさまざまなコール元から obj を受け取る可能性があるため、この変異には問題があります。これにより、foo() は obj が異なって形成されていることが必要な異なるコンシューマに obj を送信できます。obj の変異により、不確実性と矛盾が発生します。特にコードベースが大きく複雑な場合、変更によって他のコードが知らぬ間に破損する可能性があります。
オブジェクトにプロパティを追加する代わりに、オブジェクトの関連プロパティを使用して浅いコピーを作成します。このサンプルコードでは、foo() をリファクタリングしてオブジェクトのコピーを作成し、そのコピーに prop を追加します。
コピーしたオブジェクトを使用して変異を削除する 1 行の変更を次に示します。
クラスの場合、変更される可能性があるプロパティの getter と setter を公開することをお勧めします。計算に使用されるクラスプロパティを直接変更することは避けてください。
JavaScript で非公開クラス項目がサポートされるようになりました。オブジェクト指向プログラミング言語のベストプラクティスは、すべての内部状態プロパティを非公開として定義し、外部コードで変更できるプロパティに対してのみゲッターとセッターを公開することです。
イベントの場合、イベントは DOM を介して伝達されるため、簡単な回避策はありません。
考えられる解決策は次のとおりです。
- イベントデータをコピーし、同じイベントを新しいデータで再ディスパッチする。
- イベントデータをコピーし、新しいイベントを別の名前でディスパッチする。
関連トピック