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

Question

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()の中に

this.p2 = void 0

と挿入されるため、Child2のような状況に陥ってしまいました。

Comments

[bsdfan]

Child2のconstructorの最後の
this.p2 = 'a'
は、必要なんですか？

[退会済みユーザー]

実はtypescriptを用いてプログラムを書いています。
もともとのコードではChild1のようにconstructorでp2を初期化していませんが、tsがjsに変換されることにより自動的にconstructorの中に
this.p2 = void 0
と挿入されるため、Child2のような状況になってしまったというのが背景です。

[bsdfan]

typescriptはあまり詳しくないのですが、たぶん元のtypescriptのコードも載せたほうが、回答付きやすいと思います。

[miyabi_pudding]

TypeScriptを使用している理由が定かでないためなんとも言えませんが、
JavaScriptだけでも可能な構文なので、
そもそもTypeScript使わなければよいのではないでしょうか？
んで、Child2のcostructorでのp2への代入を辞めるとか。

[退会済みユーザー]

TypeScriptを使わなければよいという回答は的外れ

[miyabi_pudding]

ここは回答ではなく、質問修正依頼です。

[quickquip]

Typescriptのコードとトランスパイルに関すること(tsconfig.jsonあたり)が隠されていると解決できなさそうですね。

[miyabi_pudding]

> Typescriptのコードとトランスパイルに関すること(tsconfig.jsonあたり)が隠されていると解決できなさそうですね。

なるほど、トランスパイル設定ですか・・・。
質問者さん、
this.p2 = void 0
が発生しないようなトランスパイル設定を行うという方向性の方がいいのではないでしょうか？
そもそもそれが可能かどうかはわかりませんが・・・。

[Zuishin]

Child2 に this.p2 の代入が二つあるので片方だけにすればいいだけだと思いますが、何が問題なんでしょうか。

Answer 1

順番を考えてみてください

  constructor() {
    super()
    this.name = 'child'
    this.p2 = 'a'
  }

constructorでsuper()を呼ぶと、

    this.name = 'parent'
    this.init()

が走ります。
initの中でthis.p2 = "p2"としているのでその値が入ります
super()の後で、

    this.p2 = 'a'

としているのですから、当然c2.p2には'a'が入ります。

Answer 2

自動的にconstructor()の中に this.p2 = void 0 と挿入される

this.p2 = void 0 が挿入されない場合、[[Prototype]] から参照される親オブジェクトの p2 プロパティを探そうとします(プロトタイプサーチ)。

インスタンスが直接 p2 プロパティを有しているように値void 0（undefined）を定義したと考えるべきです。

おそらくですが、トランスパイラがプロトタイプサーチに係るパフォーマンスを優先した結果だと思います（誤差として見逃しがちな内容です）。

後から明確な値 p2 が代入されるなら問題ありませんし、Child2 の constructor() 内にある this.p2 = 'a' は不要です。

Answer 3

コンストラクタで仮想関数っぽいものを呼び出すのが悪いんだと思いますが(未初期化のクラスを使うので)、それを是とするなら、いっそのことコンストラクタの実装を別の名前に(ここでは_constructor())してみました。

良い悪いで言えば「悪い」ですが。。。質問者さんの意図には適合します。
誤解を生むので本当はコンストラクタを連想しない名前がいいですけど。

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()

Comments

[退会済みユーザー]

多くのプロパティをコンストラクタの中である値に初期化し、さらにその後任意のタイミングで同じような初期化を行いたいという場合を仮に想定します。
この場合、初期化用の関数を作ってそれをコンストラクタ内で呼ぶというよりも、コンストラクタ内と別の場所で全く同じ初期化の処理を2箇所に書くという方が良いのでしょうか。

[退会済みユーザー]

そういう作りにはしないし、したなら良くないと言わざるを得ません。
❝初期化が済んでないクラスのメソッドが呼ばれて❞、実際に質問者さんが「意図しない」と思った動作をして、質問するに至ったわけなんですから。
そもそもあまり実装の継承は追いにくくなるので好かれません。対応方法はケースバイケースなので、今みたいな意味の分からないクラスの状態(Parent,Child1,Child2のような役割が明確でない状態)では見えません。

Answer 4

Child2のinit()が呼ばれているため'p2'という値が格納されるだろうと思っていましたが

格納はされますが、その後で上書きされます。

また、p2をコンストラクタで初期化し、さらにinit()関数でp2の値を変更するにはどうしたら良いでしょうか。

そもそも論として、コンストラクタと別にinitメソッドを作る意図はどのようなものでしょうか？

Comments

[退会済みユーザー]

> そもそも論として、コンストラクタと別にinitメソッドを作る意図はどのようなものでしょうか？

後にinitを再度クラス内から呼び出して値を初期化させたいのです。

Answer 5

どうしても、処理の順番などを変えるのが難しければ、
setTimeoutで処理を遅らせるのも一つ手かと思います。

class Child2 extends Parent {
  constructor() {
    super()
    this.name = 'child'
    this.p2 = 'a'
  }

  init() {
    super.init()
    console.log(this.name)
    setTimeout(() => {
      this.p2 = 'p2';
    }, 1);
   
  }
}

ただし、制御がしづらく、後の実装に支障が出る可能性は否めません。
よって、構築や、処理の順番などで工夫する方がいいかと思います。