JS でシングルトンモードを実装するための 6 つのソリューションの概要

序文

今日は、デザインパターンのクリエーションパターンを見直していたところ、JS でシングルトンパターンを実装する方法がたくさんあることが分かりました。簡単にまとめ、次の 6 つの方法を皆さんと共有したいと思います。

一般的に言えば、内容は ES5 (関数) と ES6 (クラス) の実装の 2 つの部分に分かれています。

シングルトンパターンの概念

シングルトンパターンは、グローバル変数であるインスタンスをシステムに保存することです。チーム開発では、異なるページ間のフォーム検証など、いくつかの類似した機能を実現するために、要件は異なる場合がありますが、名前は同じである場合があり、競合が発生します。この場合、シングルトンパターンはこの問題をうまく解決できます。

インスタンスは一度だけ生成される
クラスにインスタンスが 1 つだけ存在することを確認し、そのインスタンスへのグローバルアクセスポイントを提供します。

その利点について話します:

1. シングルトンパターンは名前空間を宣言します。これにより、一意のグローバル変数、つまり名前空間が生成されます。これは、オブジェクト宣言と同じ方法で宣言できます。

var mapleTao={ name:"mapleTao",init:function(){console.log(this.name)}};

これはオブジェクトに少し似ていることに気付きましたか？実は、name と init はそのプロパティです。mapleTao.name を通じてその名前の値を取得し、mapleTao.init() を通じて init メソッドを呼び出すことができます。このようにして、複数の要求ページや複数人の開発を扱うときに、名前の競合の問題をうまく解決し、コードをより適切に保守および制御することができます。

2. シングルトンモードでは、グローバル状態で 1 つの変数のみを宣言します。ご存知のように、js では、function aa(){} などのメソッドを記述すると、ウィンドウに aa という変数が生成されます。関数を実装すると、コードのカプセル化で多くの関数が作成されます。このように、ウィンドウに多くの変数が作成され、より多くのメモリユニットを占有します。グローバル変数のスコープは非常に広く、多くの処理関数で変更される可能性があります。このように、バグが発生したときにすぐに見つけることは容易ではありません。ただし、シングルトンモードで作成されたオブジェクト変数を使用すると、問題をより迅速に見つけて解決できるため、問題の修復とシステムの読み込みにかかる時間が大幅に短縮されます。

3. 同じ機能を実装する場合、new によって新しいオブジェクトを作成するよりも、メモリとリソースの使用量の点で利点があります。

方法1

instanceof を使用して、関数を呼び出してオブジェクトをインスタンス化するために new キーワードを使用するかどうかを決定します。

関数ユーザー() {
    if (!(このインスタンスのユーザー)) {
        戻る
    }
    if (!User._instance) {
        this.name = '名前なし'
        User._instance = これ
    }
    User._instanceを返す
}

const u1 = 新しいユーザー()
const u2 = 新しいユーザー()

console.log(u1===u2); // 真

方法2

インスタンスを生成するために関数に直接メソッド属性呼び出しを追加します

関数ユーザー(){
    this.name = '名前なし'
}
User.getInstance = 関数(){
    if(!User._instance){
        User._instance = 新しいUser()
    }
    User._instanceを返す
}

定数 u1 = User.getInstance()
定数 u2 = User.getInstance()

コンソールログ(u1===u2);

方法3

クロージャを使用した改良法2

関数ユーザー() {
    this.name = '名前なし'
}
User.getInstance = (関数() {
    varインスタンス
    関数を返す（）{
        if (!インスタンス) {
            インスタンス = 新しいユーザー()
        }
        インスタンスを返す
    }
})()

定数 u1 = User.getInstance()
定数 u2 = User.getInstance()

コンソールにログ出力します。u1 === u2;

方法4

ラッパーオブジェクトとクロージャを組み合わせて実装

const ユーザー = (関数 () {
    関数_user() {
        this.name = 'xm'
    }
    関数を返す（）{
        if (!_user.instance) {
            _user.instance = 新しい _user()
        }
        _user.instance を返す
    }
})()

const u1 = 新しいユーザー()
const u2 = 新しいユーザー()

console.log(u1 === u2); // 真

もちろん、クロージャコードは関数としてカプセル化できる。

シングルトンを頻繁に使用する場合は、この方法に似たソリューションを使用することをお勧めします。もちろん、内部実装では上記のいずれかの方法を使用できます。

関数SingleWrapper(cons) {
    // 非関数と矢印関数を除外する if (!(cons instanceof Function) || !cons.prototype) {
        throw new Error('有効なコンストラクタではありません')
    }
    varインスタンス
    関数を返す（）{
        if (!インスタンス) {
            インスタンス = 新しい cons()
        }
        インスタンスを返す
    }
}

関数ユーザー(){
    this.name = 'xm'
}
定数シングルユーザー = シングルラッパー(ユーザー)
const u1 = 新しいシングルユーザー()
const u2 = 新しいシングルユーザー()
コンソールにログ出力します。u1 === u2;

方法5

コンストラクタでnew.targetを使用して、newキーワードを使用するかどうかを決定します。

クラスUser{
    コンストラクタ（）{
        if(new.target !== ユーザー){
            戻る
        }
        if(!User._instance){
            this.name = 'xm'
            User._instance = これ
        }
        User._instanceを返す
    }
}

const u1 = 新しいユーザー()
const u2 = 新しいユーザー()
コンソールにログ出力します。u1 === u2;

方法6

静的メソッドの使用

クラスユーザー{
    コンストラクタ() {
        this.name = 'xm'
    }
    静的getInstance() {
        if (!User._instance) {
            User._instance = 新しいUser()
        }
        User._instanceを返す
    }
}


定数 u1 = User.getInstance()
定数 u2 = User.getInstance()

コンソールにログ出力します。u1 === u2;

要約する

シングルトンパターンの JS 実装に関するこの記事はこれで終わりです。より関連性の高い JS シングルトンパターンのコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: