クラスメソッドのプロパティはインスタンスで共有されてしまう

クラスメソッドのプロパティはインスタンスで共有されてしまう:


インスタンスごとに同じ値が取得できてしまう

他の人のソースを触っていて、以下のような現象に遭遇。
hoge.val()の結果が最後に作成したインスタンスの値になってしまう。

class Test { 
  constructor(commonVal) { 
    this.commonVal = commonVal; 
    this.hoge.val = () => this.commonVal; 
  } 
 
  hoge() { 
    // do something.... 
    return; 
  } 
} 
 
const fuga = new Test('aaaaaaaaaaa'); 
const fuga2 = new Test('bbbbbbbbbbb'); 
 
fuga2.hoge.val() // ← "bbbbbbbbbbb" 
fuga.hoge.val()  // ← "bbbbbbbbbbb" !? 


原因

classのメソッドはprototypeに宣言されることが原因でした。

hogeはメソッド定義されていますのでprototypeに宣言され、その中にvalというプロパティが作成されてしまいます。

その結果、何個インスタンスを生成しようとも、最後に生成されたインスタンスで戻り値が上書きされてしまうわけです:helmet_with_cross:

上記はchromeのコンソールで確認しましたが、babelでプリコンパイルしても同様の挙動になります。

babelもクラスメソッドはprototypeに宣言するから

そもそも上記のようなコンストラクタの記述が好ましくないと思うのですが、他人のソースなので意図が読めず・・・(grepしたけど、hoge.valはどこにも使用されていなかった)

以上、わかればどうということはないのですが、挙動やソースが意味わからなさすぎて2時間くらいかかりました:santa:

コメント

このブログの人気の投稿

投稿時間:2021-06-17 05:05:34 RSSフィード2021-06-17 05:00 分まとめ(1274件)

投稿時間:2021-06-20 02:06:12 RSSフィード2021-06-20 02:00 分まとめ(3871件)

投稿時間:2020-12-01 09:41:49 RSSフィード2020-12-01 09:00 分まとめ(69件)