【TypeScript】シングルトンパターンは何故実装できるのでしょうか？

Question

シングルトンパターンで、インスタンスを１回だけ作るソースコードを見ましたが違和感があります。
例えば下記のようなクラスがあります。

class Sample {
    private static instance: Sample;
    static getInstance() {
        if(! Sample.instance) {
            Sample.instance = new Sample();
        }
        return Sample.instance;
    }
}

２回インスタンスを生成しようとすると、１回目のみ新しくインスタンスを生成します。

// 最初は新しくインスタンスを作る
const sample1 = Sample.getInstance()
// 2回目はインスタンスを作らない
const sample2 = Sample.getInstance()

ソースの流れからSampleクラス自体を上書きしているのは分かります。
上書きしているので、２回目でもクラスを呼び出したら上書きされた状態なんだろうなと推測できます。　
ただ、クラス自体を上書き出来る事が理解できません。
そもそも、クラスは何処で情報を保持しているのでしょうか？

class Sample {
    private static instance: Sample;
    static getInstance() {
        if(! Sample.instance) {
            Sample.instance = new Sample(); <-- このSampleは何処で保持されているのか？
        }
        return Sample.instance;
    }
}

よく、クラスをたい焼きの金型の話に例える事があります。
あくまで、クラスはテンプレートであって、それ自体にデータを持たないと思っていました。
そもそもこの考え方に間違いがあるのでしょうか？

最終的に「そう言うものだ」でも良いのですが、もしお分かりになる方がいらっしゃればご教示いただきたいです。

Answer 1

違和感があります

同感です。これは、トランスパイルされた後のJavaScript がプロトタイプベースですので、尚のこと、そう感じます。

２回目でもクラスを呼び出したら上書きされた状態なんだろうなと推測

ご質問のコードで Sample.instance も Sample.getInstance() も スタティックにアクセスしている点に注意してみてください。

1. 最初の1回目は Sample.instance === undefined なので、new Sample() で上書き
2. 2回目以降は、Sample.instance === [object Sample] なので、new Sample()は実行されません。

---

このSampleは何処で保持されているのか

JavaScript的には不要です。
シングルトンクラスをJavaScriptで表現する場合、 new 演算子も不要になります。

トランスパイル後のコードはわかりませんが、JavaScriptでシングルトンを書く例を２つ。

古典的な コンストラクタ関数で作る

function Sample () {
  throw "this class is static."
}
Sample.getInstance() {
  return this; // 事実上、Sample namespace に与えられたプロパティを参照できる。
}

オブジェクトリテラルで作る

var Sample = {
  getInstance() {
    return this;
  }
}

JavaScriptでは、ネームスペースとなるオブジェクトのプロパティが、シングルトンクラスの実際となり、「どのようなメソッド/アクセサプロパティを持っているか？」は、まさに「たい焼きの金型」だと思います。
が、変数プロパティの場合、同一スコープで共有された変数のようになります。

冒頭に述べたとおり、TypeScriptのコードの書き方（静的型付け言語）と プロトタイプベースなJavaScriptのコードの書き方（動的型付け言語）とを整合するため、そういう形になるのだと思います。

Comments

[hasshy]

ご回答いただきありがとうございます。
ご連絡が遅れてしまい失礼いたしました。

また、javascript自体について掘り下げてご説明いただきありがとうございます。
（表現に語弊があったら申し訳ありませんが）TypeScriptで分かりやすいソースコードにするだけであって、トランスコンパイラしたjavascript的には不要ですね。

Answer 2

そもそもそのタイプのシングルトンクラスの実装はTypeScriptで一般的なものなのでしょうか？
より直感的に理解しやすいのはこのようなパターンではないですか？

class Singleton {
    private static _instance : Singleton = new Singleton();
    private constructor(){}
    public static get instance() :Singleton {
        return this._instance;
    }
}

「これで出来るのはなぜか？」が質問の趣旨であるならば、回答として相応しくないかもしれませんが…

Comments

[hasshy]

ご回答いただきありがとうございます。
ご連絡が遅れてしまい申し訳ありません。

サンプルコードを載せていただきありがとうございます。
私自身、たまたま見た記事でシングルトン を知ったので、一般的な方法を教えていただきとても助かります。