・同名プロパティは、値が上書きされます
・プロトタイプ上のプロパティはコピーされません
・アクセサプロパティのゲッターはデータプロパティとしてコピーされます。
・セッターのみのプロパティは、値がundefinedのデータプロパティとしてコピーされます。
・プロパティ属性のenumerableがfalseのものはコピーされません
・コピー後の属性は、{ writable: true, enumerable: true, configurable: true } です。

※属性についてはObject.defineProperty()を参照してください。

■構文


Object.assign ( target, ...sources )

target: コピー先のオブジェクト
...sources: コピー元のオブジェクト
複数のオブジェクトをカンマで区切って指定する

targetで指定したオブジェクト

■使用例

▶ オブジェクトの複製

const obj1 = { prop1:100,text1:"hello" };
  // 空のオブジェクトに obj1 をコピー
const obj2 = Object.assign( {} , obj1 );

console.log( obj2 ); // { prop1: 100, text1: 'hello' }

▶ ゲッター/セッターはデータプロパティに変換される

const obj1 = { 
    get value1(){ return 100; },
    set value2(t){}
};
  // 属性確認
console.log( Object.getOwnPropertyDescriptor(obj1,"value1") );
  // {  get: get value1(),set: undefined, enumerable: true, configurable: true }
console.log( Object.getOwnPropertyDescriptor(obj1,"value2") );
  // { get: undefined, set: set value2(), enumerable: true, configurable: true }

const obj2 = Object.assign( {} , obj1 );

console.log( obj2 ); // { value1: 100, value2: undefined }
console.log( Object.getOwnPropertyDescriptor(obj2,"value1") );
  // { value: 100, writable: true, enumerable: true, configurable: true }
console.log( Object.getOwnPropertyDescriptor(obj2,"value2") );
  // { value: undefined, writable: true, enumerable: true, configurable: true }

▶ enumerable属性がfalseのプロパティはコピーされない

const obj1 = { prop1:100};
Object.defineProperty( obj1 , "prop",{
  value:1,
  enumerable:false, // 規定値のため省略可能
  });

const obj2 = Object.assign( {} , obj1 );
console.log( obj2 ); // { prop1: 100 }

▶ コピー後の３つの属性はtrueになる

const obj1 = { prop1:100};
Object.defineProperty( obj1 , "prop",{
  value:1,
  writable:false, // 規定値のため省略可能
  configurable:false, // 規定値のため省略可能
  enumerable:true, 
  });

const obj2 = Object.assign( {} , obj1 );
console.log( obj2 ); // { prop1: 100, prop: 1 }
console.log( Object.getOwnPropertyDescriptor ( obj2 , "prop" ) );
  // { value: 1, writable: true, enumerable: true, configurable: true }

■シャローコピーの仕組み

Object.assign()は、元となるオブジェクトからプロパティ名を取得して、ターゲットのオブジェクトに同名のプロパティを作成します。
次に、値をプロパティに代入しているだけです。

問題となるのが、JavaScriptの代入の仕組みです。
JavaScriptの代入は値ではなく、関連付けを受け渡しています。
その結果、二つのプロパティが同じデータを参照します。

二つのプロパティが同じデータを参照

プロパティの値がオブジェクトの場合でも同様に関連付けをコピーします。その結果二つのプロパティが同じオブジェクトを参照します。

二つのプロパティが同じオブジェクトを参照

共通するオブジェクトを変更する場合、当然のことですが、他方にも影響を与えます。

記事の内容について

こんにちはけーちゃんです。
説明するのって難しいですね。

「なんか言ってることおかしくない？」
たぶん、こんなご意見あると思います。

裏付けを取りながら記事を作成していますが、僕の勘違いだったり、そもそも情報源の内容が間違えていたりで、正確でないことが多いと思います。
そんなときは、ご意見もらえたら嬉しいです。

掲載コードについては事前に動作確認をしていますが、貼り付け後に体裁を整えるなどをした結果動作しないものになっていることがあります。
生暖かい視線でスルーするか、ご指摘ください。

ご意見、ご指摘はこちら。
https://jsref.affi-sapo-sv.com/info.php

このサイトは、リンクフリーです。大歓迎です。

【JSリファレンス】Object.assign()

■構文

■使用例

関連ページ

スポンサーリンク

記事の内容について

【自作ミニゲーム】

最新記事