Object.assignを用いたコンストラクタの初期値設定について

Question

class Member {
  constructor(firstName, lastName) {
    Object.assign(this, {firstName, lastName});
  }
  getName() {
    return this.lastName + this.firstName;
  }
}

let m = new Member('太郎', '山田');
console.log(m.getName()); //結果　山田太郎

上記のコードの中の

Object.assign(this, {firstName, lastName});

このコードでなぜうまくいくのかがわからないです。特にthisの中身がわからないです。少し曖昧な質問なのですが直接の答えでなくとも、参考となるサイトなど教えていただけたら大変ありがたいです。よろしくお願いします。

Answer 1

new Member('太郎', '山田') すると新たなオブジェクトが作られます.
作られたオブジェクトが this にセットされた状態で constructor() が呼び出されます.

JavaScript における this は色々罠があったりちょっと複雑なので詳しくはきちんと調べて欲しいですが,
このコードのその場所で使われている this は作成されたばかりの新しい Member オブジェクトです.

{firstName, lastName} はオブジェクト初期化子ですが, JavaScript のバージョン ES2015 から導入された Shorthand property names を使っています.
それ以前のバージョンの表記で書くと {firstName: firstName, lastName: lastName} です.
プロパティ名と内容が一致する場合に省略可能になったんですね.

Object.assign() は最初の引数のオブジェクトに対して, 次の引数のオブジェクトのメンバをコピーします.
この場合は {firstName, lastName} の各メンバを, 作られたばかりの Member オブジェクトの同じ名前のプロパティへ代入します.

// Object.assign() の動作イメージ
const o = {firstName, lastName}; // {firstName: '太郎', lastName: '山田'}
this.firstName = o.firstName;
this.lastName = o.lastName;

結果, 作られたばかりの Member オブジェクトはめでたく firstName と lastName で初期化されることになります.

Comments

[kabatiro]

なるほどです！丁寧に解説していただきありがとうございます！！

Answer 2

特にthisの中身がわからない

コンストラクタ中のthisは、大雑把に言うと何も入っていないオブジェクトです。
いろいろあるのですが、簡単のために誤解を恐れずに言えば、{}と同じです。
なので、以下のような意味だと理解して、おおむね間違いありません。

Object.assign(this, {firstName, lastName});
// ↑これはこう考えるとわかりやすい↓
Object.assign({}, {firstName, lastName});

ちなみに、{firstName, lastName}の部分は、以下のような意味です。

{firstName, lastName}
// ↑これは等価↓
{firstName:firstName, lastName:lastName}

Comments

[kabatiro]

ありがとうございます！理解できました！

[kagilinn]

実際には
`Object.assign({}, {firstName, lastName});`
だと変更後のオブジェクトが捨てられてしまうことに注意ですね.

[Lhankor_Mhy]

おっしゃるとおりです。

Answer 3

このコードでなぜうまくいくのかがわからないです。

これは、以下のコードと概ね同じ意味です。

this.firstName = firstName;
this.lastName = lastName;

特にthisの中身がわからないです。

コンストラクタで作成中のオブジェクトです。

Comments

[kabatiro]

ありがとうございます！