Javascript에서 싱글톤을 만드는 7가지 방법

Jan 23 2023

안녕하세요, 제가 가장 좋아하는 비트 애호가입니다. 오늘 우리는 프로젝트에서 사용할 수 있는 가장 일반적인 것인 싱글톤 패턴에 대해 이야기할 것입니다.

안녕하세요, 제가 가장 좋아하는 비트 애호가들 . 오늘 우리는 프로젝트에서 사용할 수 있는 가장 일반적인 것인 싱글톤 패턴 에 대해 이야기할 것입니다 .

싱글톤이 무엇인지 이미 알고 있는 분들은 계속 스크롤하십시오. 이 기사가 여러분을 놀라게 할 것이라고 확신합니다.

다른 사람들을 위해…

Singleton 패턴 — 가장 일반적으로 사용되며 거의 모든 인터뷰에서 묻는 것 중 하나입니다. 클래스의 사용을 단일 사용으로 제한하는 패턴으로 설명할 수 있습니다. 즉, 응용 프로그램에서는 클래스의 인스턴스를 하나만 가질 수 있습니다.

이것이 해결되었으므로 예제로 이동하겠습니다.

이 기사에는 Javascript 및 Typescript 예제가 모두 포함됩니다 .

클래식 싱글턴

싱글톤을 구현하는 가장 상징적이고 고전적인 방법입니다. 모든 튜토리얼과 모든 프로그래밍 책에서 그 예를 찾을 수 있습니다.

자바스크립트 예시:

타이프 스크립트 예:

사용 방법은 다음과 같습니다.

ClassicSingleton.instance.invoke();

장점

간단하고 간단하며 깨끗한 솔루션
가장 일반적인 접근 방식

응용 프로그램 부팅 시 초기화되어 응용 프로그램 부팅 속도가 느려질 수 있음
제대로 상속될 수 없습니다. 즉, 싱글톤을 사용하려는 모든 단일 클래스에서 이 코드를 복제해야 합니다.

Lazy Singleton은 싱글톤을 바로 초기화하고 싶지 않고 필요할 때만 사용하고 싶을 때 주로 사용합니다. 앱에 미세 최적화를 수행하는 좋은 방법입니다. 다른 문제에서는 Classic Singleton 에 가깝습니다 .

자바스크립트 예시:

타이프 스크립트 예:

사용 방법은 다음과 같습니다.

LazySingleton.instance().invoke();

장점

사용될 때 초기화되고 호출되지 않을 때 메모리를 차지하지 않습니다.
간단하고 깨끗한 솔루션

사용 시 초기화되므로 처음 사용할 때 약간의 지연이 발생할 수 있습니다.
상속될 수 없습니다. 즉, 싱글톤을 사용하려는 모든 단일 클래스에서 이 코드를 복제해야 합니다.

Lazy Singleton 과 거의 동일 하지만 일반 함수 대신 getter를 사용하므로 지저분한 대괄호 사용을 피할 수 있습니다 ().

자바스크립트 예시:

타이프 스크립트 예:

사용 방법:

LazyGetterSingleton.instance.invoke();

Lazy Singleton 과 동일한 장단점 이 있습니다 .

싱글톤 가져오기

모든 프로그래밍 언어가 파일에서 선언을 내보내고 가져오는 패러다임을 따르는 것은 아니기 때문에 접근 방식이 일반적이라고 말할 수 없습니다.

자바스크립트 ES6(바벨) 예:

자바스크립트 (노드) 예시:

타이프 스크립트 예:

Javascript ES6(Babel) 및 Typescript 버전 사용 방법 :

import { importSingletion } from "./ImportSingleton";

importSingleton.invoke();

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

importSingleton.invoke()

장점

간단하고 간단하며 깨끗한 솔루션

응용 프로그램 부팅 시 초기화되어 응용 프로그램 부팅 속도가 느려질 수 있음
자동화할 수 없으므로 코드 베이스가 중복됩니다.

데코레이터 싱글톤

Singleton 과 Decorator 라는 두 가지 패턴을 함께 사용할 때 흥미로운 접근 방식입니다 .

핵심 아이디어는 코드 중복을 최소화하는 것입니다.

자바스크립트 예시:

Typescript 와 함께 사용할 수 있지만 불행히도 기본적으로 Typescript는 동적 속성을 인식하지 못하며 Typescript가 이를 지원하려면 꽤 더러운 코드를 추가로 작성해야 합니다. 그렇기 때문에 이 접근 방식을 Typescript 와 함께 사용하지 않는 것이 좋습니다 .

사용 방법:

DecoratorSingleton.instance.invoke();

간단하고 간단하며 깨끗한 솔루션
상당히 깨끗한 코드 기반을 유지하고 코드 중복을 피할 수 있습니다.

응용 프로그램 부팅 시 초기화되어 응용 프로그램 부팅 속도가 느려질 수 있음

멋진 접근 방식은 Singleton 과 Decorator 라는 두 패턴을 함께 결합 하지만 다른 각도에서 싱글톤을 볼 수도 있습니다. 그리고 보너스로 Javascript 에 대한 깊은 지식의 문을 엽니다 .

자바스크립트 예시:

타이프 스크립트 예:

Javascript 및 Typescript 버전을 사용하는 방법은 다음과 같습니다 .

new BindSingleton().invoke()

BindSingleton().invoke()

다음을 사용하여 정확성을 확인할 수 있습니다.

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

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

음, 간단합니다. 우선, 우리는 BindSingleton클래스가 아니라 함수입니다. 그것이 우리가 BindSingleton()그것을 사용할 수 있는 이유입니다. 멋지죠?

이제 왜 new BindSingleton()같은 인스턴스를 계속 반환합니까? 다시 한 번 매우 명백하게, 우리의 논리 검사는 instance클래스의 정적 속성에 대한 함수 검사에서 속성이 존재하지 않으면 클래스의 인스턴스를 생성하고 속성이 존재하면 새 인스턴스를 초기화하는 대신 이를 사용합니다.

장점

싱글톤에 액세스할 수 있는 다양한 방법을 제공합니다.
게으른 싱글톤 으로 간주됨
코드 베이스를 상당히 깔끔하게 유지할 수 있습니다.

Javascript 에 대한 깊은 이해가 필요하며 경험이 없는 개발자를 혼란스럽게 할 수 있습니다.
다른 방법과 비교할 때 - 많은 코드.

생성자 싱글톤

이것은 Javascript 작동 방식에 대한 깊은 이해가 필요 하지만 진정으로 우아한 솔루션입니다.

자바스크립트 예시:

타이프 스크립트 예:

사용 방법은 다음과 같습니다.

new ConstructorSingleton().invoke()

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

코드가 처음 실행될 때 — 초기화되고 cache인스턴스 생성이 에 도달하면 constructor반환 값을 확인하고 처음 실행 생성자 반환에서 Javascript가 클래스의 새 인스턴스를 생성 undefined하도록 강제합니다 . 그러나 이후의 모든 실행은 인스턴스를 가져오고 인스턴스 를 반환할 것입니다. 대신 기존 인스턴스를 반환해야 함을 Javascript 에 표시합니다 .cacheconstructorundefined

Javascript에서 싱글톤을 만드는 7가지 방법

클래식 싱글턴

싱글톤 가져오기

데코레이터 싱글톤

생성자 싱글톤

자원