フロントサイドエンジニアという選択肢

HTMLコーダー → ECサイト運営 → システムエンジニア という経歴の著者がフロントサイトエンジニアという職業に今後の活路を見出し、その道に進むために取得した技術を貯めておくブログ

(Javascript)オブジェクトの複製

Javascriptの代入(=)は独特の癖があって、リテラルは値のコピーを行い行うように振る舞い、オブジェクトは参照値のコピーを行います。なので代入を使ってコピーした場合、コピー先の内容を変えると、コピー元に反映されてしまいます。

var original = {id:1};
var copy = original;
copy.id = 2;
original.id; // 2

Javascript 1.8.5から追加されたObject.createメソッドを使用すると、オブジェクトを別の値としてコピーすることができます。
Object.create( [ Object name ] )

var original = {id:1};
var copy = Object.create(original);
copy.id = 2;
original.id; // 1
注意事項

Object.createを使用した場合の変数original と copy は別物ですが、実際はコピーが行われたわけではなく、originalをprototypeに持つ新しいオブジェクトを作成しています。 なので、上記のコピーを行った後、copy.__proto__.id = 2としてしまうと、original.idも2になってしまいます。copy.id = 2では値の書き換えではなく、オーバーライドが行われております。

このメソッドを使用してオブジェクトの複製を行う場合は、prototypeを変更する際に気を付ける必要があります。