2016-04-19 2 views
11

次のシナリオは、この問題を自分で解決した例です。技術的な詳細に直接スキップしたい場合は、下記の「技術的な詳細」を参照してください。Object.assign()メソッドを使用してオブジェクトのインスタンスをコピーする必要があるのはいつですか?

私はJavaScriptを学ぶために取り組んできた個人的なプロジェクトがあります。基本的に、ユーザーは使用可能なオプションを選択することによって靴をデザインすることができます。

トリックは、左右の靴が同じサイズでなければならないということですが、色、靴ひものテクスチャなどは靴ごとに独立したプロパティになる可能性があります。 (私はこれがオブジェクトの操作と継承を実践するためのまともな方法だと思った)。

ユーザーは、右足の靴のデザインから始めます。左側の靴を見るために「スワップ」ボタンがクリックされると、ユーザは現在、右側の靴のコピーを見る(しかし、反転される)。 靴の最初の交換時にのみ、左靴が生成され、右靴の正確なコピーが作成されます。その後、靴の向きごとに固有のオプションが保持されます。次に、ユーザがに特定の変更を加えて左足靴モデルにして右足靴に切り替えると、ユーザは「スワップ」ボタンをクリックする前に元々設計していたのとまったく同じ右靴を見ることになっています。

右靴に赤い靴ひもがある場合、左靴の表示に切り替えて左靴に青い紐が付いた後、右靴に戻ったときに赤い紐が表示されます。


技術的な詳細

私はperservedされているユニークなオプションとトラブルに実行していた私の主なプロジェクトのためのコードを書いていました。たとえば、左靴の靴ひもを緑にした場合、右靴には常に緑の靴ひもがあります。右靴が赤い靴のようなユニークなオプションを失う唯一の時間は、左靴のレースの色を設定するときだったので、問題を解決するのは簡単でした。

コンソールにログインしただろうか
console.log("THE RIGHT LACE BEFORE: " + rightShoe.laceId); 
leftShoe.laceId = 'green'; 
console.log("THE RIGHT LACE AFTER: " + rightShoe.laceId); 

RIGHT LACE、BEFORE:赤

RIGHT LACE AFTER:グリーン

私は変更されなかったにもかかわらず、 rightShoeleftShoeプロパティを変更するたびに変更されていました。

だから私は(私の素人の考えがあれば、なぜleftShoeオブジェクトを伝播し、埋めるたバック私は最初のスクリプトの人生で初めてユーザーがクリックでleftShoeオブジェクト、「スワップ」を定義する場所に行ってきましたユーザーはおそらく左靴をカスタマイズすることはできませんか?データが不必要に不自然になっているかもしれませんが、わかりません。それ以来、leftShoeは、rightShoeのコピーであるか、その逆であることは決して決して再定義されませんでした。私はオブジェクト参照をしていて、他の言語と同じように、参照を変更していて、値ではないという事実によってハングアップしていると考えました。

問題が発生したので、私は問題を再現するためにJSFiddleを作成したかったのです。私のプロジェクトは長いです(約1500行、グラフィックの場合はTHREE.jsを含む)、私はそのプロセスをエミュレートするために最善を尽くしました。だからhere it is

JSFiddleが私が期待したとおりに動作することを除いて!左のモデルはその属性に固有の属性とデータセットを保持していました。だから、もう少し掘り下げて、Object.assign()メソッドについて読んだ。だから、私の元のプロジェクトコード(ないフィドル)で、私はこれを変更:これに

leftShoe = rightShoe; 

:私は最終的に仕事にこれを得ていることになっているよう

leftShoe = Object.assign({}, rightShoe); 

として興奮し、私は私のJSFiddleがassign()メソッドを必要としないが、私の同一のプロジェクトコードがなぜ必要なのか分からないので、同じように面白く困惑した。ありがとうございました。

+0

最初のケースでは、両方の変数が同じオブジェクトを参照しています。後者の場合は、新しいオブジェクト( '{}')を作成し、 'Object.assign'を使ってすべてのプロパティをコピーします。 1つのオブジェクトを変異させると、他のオブジェクトには反映されません。 – Bergi

+0

@Bergiありがとう、私は今、私には意味があると思う。他の言語との標準。しかし、今私を捨てているのは私のJSFiddleです。私がリンクしているフィドルの35行目の私の参照割り当てを見てみると、左のオプションの値が参照されているオブジェクトであるという事実とは関係なく変更されていることがわかります。 – 8protons

+0

あなたのフィドルは混乱しています(そのすべてのcurrentChoiceとleftChoiceExistsで)、おそらくあなたは混乱しています。代入の後、 'rightChoice.id' ==' leftChoice.id'を見ることができます - 両方の変数が同じオブジェクトを参照しているからです。 – Bergi

答えて

8

Object.Assignは、すべての列挙可能なOWNプロパティを含む、左靴の新しいCOPYを作成します。 leftshoe = rightshoeを使用すると、左側の靴を参照しています。参照は新しいオブジェクトではなく、同じオブジェクトを指しています。したがって、参照のプロパティを変更すると、実際には元のように変更されます。

+1

ありがとう!だから、なぜ私はJSFiddleにリンクしているのでしょうか?私は参照割り当てを使用していますが、依然として変更を加えることができます。私のフィドルの35行目をチェックして、出力を見ながら作成したボタンを見てください。 – 8protons

+0

フィドルが私に壊れているようです。 rightIdは999に留まるべきときに444に設定されます –

関連する問題