JavaScript 継承について子の値が更新されない

Question

```js
class Parent {
  constructor() {
    this.name = 'parent'
    this.init()
  }

  init() {
    this.p1 = 'p1'
  }
}

class Child1 extends Parent {
  constructor() {
    super()
    this.name = 'child'
  }

  init() {
    super.init()
    console.log(this.name)
    this.p2 = 'p2'
  }
}

class Child2 extends Parent {
  constructor() {
    super()
    this.name = 'child'
    this.p2 = 'a'
  }

  init() {
    super.init()
    console.log(this.name)
    this.p2 = 'p2'
  }
}

const c1 = new Child1()
const c2 = new Child2()
```

このとき```c1.p2```には```'p2'```と予想通りの値が格納されているのですが、```c2.p2```には```'a'```が格納されています。```Child2```の```init()```が呼ばれているため```'p2'```という値が格納されるだろうと思っていましたが、なぜこのような違いが生まれるのでしょうか。

また、```p2```をコンストラクタで初期化し、さらに```init()```関数で```p2```の値を変更するにはどうしたら良いでしょうか。

# 問題の背景
もともとのコードでは```Child1```のように、```constructor()```で```p2```を初期化していませんが、tsがjsにトランスパイルされることにより自動的に```constructor()```の中に
```js
this.p2 = void 0
```
と挿入されるため、```Child2```のような状況に陥ってしまいました。

Answer

> 自動的にconstructor()の中に ``this.p2 = void 0`` と挿入される

``this.p2 = void 0`` が挿入されない場合、[[Prototype]] から参照される親オブジェクトの ``p2`` プロパティを探そうとします(**プロトタイプサーチ**)。

インスタンスが直接 ``p2`` プロパティを有しているように値``void 0``（``undefined``）を定義したと考えるべきです。

おそらくですが、トランスパイラがプロトタイプサーチに係るパフォーマンスを優先した結果だと思います（誤差として見逃しがちな内容です）。

後から明確な値 ``p2`` が代入されるなら問題ありませんし、``Child2`` の constructor() 内にある ``this.p2 = 'a'`` は不要です。

Answer

コンストラクタで仮想関数っぽいものを呼び出すのが悪いんだと思いますが(未初期化のクラスを使うので)、それを是とするなら、いっそのことコンストラクタの実装を別の名前に(ここでは_constructor())してみました。

良い悪いで言えば「悪い」ですが。。。質問者さんの意図には適合します。
誤解を生むので本当はコンストラクタを連想しない名前がいいですけど。

```javascript
class Parent {
  constructor() {
    this._constructor()
    this.init()
  }

  _constructor() {
      name = 'parent'
  }

  init() {
    this.p1 = 'p1'
  }
}

class Child1 extends Parent {
  _constructor() {
    super._constructor()
    this.name = 'child'
  }

  init() {
    super.init()
    console.log(this.name)
    this.p2 = 'p2'
  }
}

class Child2 extends Parent {
  _constructor() {
    super._constructor()
    this.name = 'child'
    this.p2 = 'a'
  }

  init() {
    super.init()
    console.log(this.name)
    this.p2 = 'p2'
  }
}

const c1 = new Child1()
const c2 = new Child2()
```

Answer

どうしても、処理の順番などを変えるのが難しければ、
`setTimeout`で処理を遅らせるのも一つ手かと思います。

```javascript
class Child2 extends Parent {
  constructor() {
    super()
    this.name = 'child'
    this.p2 = 'a'
  }

  init() {
    super.init()
    console.log(this.name)
    setTimeout(() => {
      this.p2 = 'p2';
    }, 1);
   
  }
}
```
ただし、制御がしづらく、後の実装に支障が出る可能性は否めません。
よって、構築や、処理の順番などで工夫する方がいいかと思います。

Answer

順番を考えてみてください

```javascript
  constructor() {
    super()
    this.name = 'child'
    this.p2 = 'a'
  }
```

constructorで`super()`を呼ぶと、

```javascript
    this.name = 'parent'
    this.init()
```

が走ります。
initの中で`this.p2 = "p2"`としているのでその値が入ります
`super()`の後で、

```javascript
    this.p2 = 'a'
```

としているのですから、当然c2.p2には'a'が入ります。

Answer

> Child2のinit()が呼ばれているため'p2'という値が格納されるだろうと思っていましたが

格納はされますが、その後で上書きされます。

> また、p2をコンストラクタで初期化し、さらにinit()関数でp2の値を変更するにはどうしたら良いでしょうか。

そもそも論として、コンストラクタと別に`init`メソッドを作る意図はどのようなものでしょうか？

問題の背景

関連した質問