JavaScript でシングルトンを作成する 7 つの方法

Jan 23 2023

こんにちは、私のお気に入りのビット愛好家です。今日は、プロジェクトで使用する可能性のある最も一般的なもの、シングルトンパターンについて説明します。

こんにちは、私のお気に入りのビット愛好家。今日は、プロジェクトで使用する最も一般的なもの、シングルトンパターンについて説明します。

シングルトンとは何かをすでに知っている方は、スクロールを続けてください。この記事はきっと驚かれるでしょう。

ほかの人のため…

シングルトンパターン— 最も一般的に使用されており、ほぼすべての面接で質問される項目の 1 つです。これは、クラスの使用を単一の使用に制限するパターンとして説明できます。つまり、アプリケーションでは、クラスのインスタンスを 1 つだけ持つことが許可されます。

これで解決したので、例に移りましょう。

この記事には、JavaScriptとTypescript の両方の例が含まれています。

クラシックシングルトン

シングルトンを実装する最も象徴的で古典的な方法。その例は、あらゆるチュートリアルやあらゆるプログラミング書籍で見つけることができます。

JavaScript の例:

タイプスクリプトの例:

そして、その使用方法は次のとおりです。

ClassicSingleton.instance.invoke();

長所

シンプルでわかりやすくクリーンなソリューション
最も一般的なアプローチ

アプリケーションの起動時に初期化されるため、アプリケーションの起動が遅くなる可能性があります
適切に継承できないため、シングルトンを使用するすべての単一クラスでこのコードを複製する必要があります。

Lazy Singleton は主に、シングルトンをすぐに初期化せずに、必要な場合にのみ使用したい場合に使用されます。アプリを微細に最適化するための良い方法です。その他の点ではクラシックシングルトンに近いです。

JavaScript の例:

タイプスクリプトの例:

そして、その使用方法は次のとおりです。

LazySingleton.instance().invoke();

長所

使用時に初期化され、呼び出されなかったときにメモリを占有しません。
シンプルでクリーンなソリューション

使用時に初期化されるため、初回使用時にわずかな遅延が発生する可能性があります
継承できないため、シングルトンを使用するすべての単一クラスでこのコードを複製する必要があります。

Lazy Singletonとほぼ同じですが、単純な関数の代わりにゲッターを使用するため、厄介な括弧の使用を避けることができます()。

JavaScript の例:

タイプスクリプトの例:

それの使い方：

LazyGetterSingleton.instance.invoke();

Lazy Singletonと同じ長所と短所があります。

シングルトンのインポート

すべてのプログラミング言語がファイルからの宣言のエクスポート/インポートのパラダイムに従っているわけではないため、このアプローチが一般的であるとは言えません。

Javascript ES6 (Babel) の例:

JavaScript (ノード) の例:

タイプスクリプトの例:

Javascript ES6 (Babel) とTypescriptバージョンの使用方法:

import { importSingletion } from "./ImportSingleton";

importSingleton.invoke();

const importSingleton = require("./ImportSingleton");

importSingleton.invoke()

長所

シンプルでわかりやすくクリーンなソリューション

アプリケーションの起動時に初期化されるため、アプリケーションの起動が遅くなる可能性があります
自動化できないため、コードベースの重複が発生する

デコレーター・シングルトン

SingletonとDecoratorという 2 つのパターンを一緒に使用すると、興味深いアプローチになります。

基本的な考え方は、コードの重複を最小限に抑えることです。

JavaScript の例:

Typescriptで使用できますが、残念ながらデフォルトではTypescript は動的プロパティを認識しないため、それをサポートするにはTypescript用に追加の非常に汚いコードを記述する必要があります。このため、Typescriptではこのアプローチを使用しない方が望ましいのです。

それの使い方：

DecoratorSingleton.instance.invoke();

シンプルでわかりやすくクリーンなソリューション
かなりクリーンなコードベースを維持し、コードの重複を避けることができます。

アプリケーションの起動時に初期化されるため、アプリケーションの起動が遅くなる可能性があります

これもクールなアプローチで、SingletonとDecorator という2 つのパターンを結合しますが、シングルトンを別の角度から見ることもできます。さらに、JavaScriptの深い知識への扉も開きます。

JavaScript の例:

タイプスクリプトの例:

JavascriptとTypescriptバージョンの使用方法は次のとおりです。

new BindSingleton().invoke()

BindSingleton().invoke()

次のようにして正確さを確認できます。

new ConstructorSingleton() === new ConstructorSingleton() // => true

ConstructorSingleton() === ConstructorSingleton() // => true

まあ、シンプルです。まず第一に、これはBindSingleton決してクラスではなく、関数です。だからこそ使えるのですBindSingleton()。クールですよね？

では、new BindSingleton()同じインスタンスを返し続けるのはなぜでしょうか? 繰り返しになりますが、ロジックはinstance関数チェックでクラス内の静的プロパティをチェックし、プロパティが存在しない場合はクラスのインスタンスを作成し、プロパティが存在する場合は、新しいインスタンスを初期化する代わりにそれを使用します。

長所

シングルトンにアクセスする方法をたくさん提供します
怠惰なシングルトンとみなされる
コードベースをかなりクリーンに保つことができます

Javascriptについての深い理解が必要であり、経験の浅い開発者は混乱する可能性があります
他の方法と比較すると、コード量が多くなります。

コンストラクターシングルトン

これは、JavaScript がどのように動作するのかについて非常に深い理解を必要としますが、実に洗練されたソリューションです。

JavaScript の例:

タイプスクリプトの例:

使用方法は次のとおりです。

new ConstructorSingleton().invoke()

new ConstructorSingleton() === new ConstructorSingleton() // => true

初めてコードを実行するとき、cacheコードは初期化され、に到達するとインスタンスが作成され、constructor戻り値がチェックされ、最初に実行されるコンストラクターで return が行われ、JavaScriptにクラスの新しいインスタンスを強制的に作成させundefinedます。ただし、その後のすべての実行はインスタンスを取得し、既存のインスタンスを返す必要があることをJavascriptに示す代わりにインスタンスを返します。cacheconstructorundefined

JavaScript でシングルトンを作成する 7 つの方法

クラシックシングルトン

シングルトンのインポート

デコレーター・シングルトン

コンストラクター シングルトン

資力

コンストラクターシングルトン