January 06, 2023·vincent

js中的单例模式

js设计模式单例

Javascript

本次分享的内容是设计模式中的单例模式。本文介绍了什么是单例模式，单例模式的两种实现方式和各种的优缺点，最后介绍了如何借助ES6新特性Proxy实现包装一个单例模式。

单例模式

单例模式就是保证一个类只有一个实例，而且自行实例化并向整个系统提供这个实例。

单例模式的优点：

由于单例模式只生成一个实例，所以能减少系统性能的开销；
避免对共享资源的多重占用导致的性能损耗，如日志文件，应用配置。
提供了对唯一实例的受控访问，加快对象访问速度，比如多线程线程池的设计，方便对池中的线程进行控制。

单例模式的特点：

保证一个类中只有一个实例；
在类中实例化自己；
向整个系统提供这个实例；

单例模式的实现

单例模式被大家熟知的有两种实现方式：饿汉式单例模式和懒汉式单例模式。

两种实现方式的核心要点相同就是构造函数私有化，然后将一个静态私有变量确立为唯一实例，外部通过静态方法访问这个唯一的实例。

-懒汉式单例模式

1class Singleton1{
2    /*核-一个接收实例的静态成员*/
3    private static people:Singleton1;
4    private name:string;
5    /*核心-私有构造函数*/
6    private constructor(name:string) {
7        this.name = name;
8    }
9    /*核心-获取实例*/
10    public static getInstance():Singleton1{
11        if(Singleton1.people == null){
12            Singleton1.people = new Singleton1("懒汉式单例模式");
13        }
14        return Singleton1.people;
15    }
16    public say():void{
17        console.log(`${this.name}`);
18    }
19}
20/*测试代码*/
21let people = Singleton1.getInstance();
22people.say(); //懒汉式单例模式

懒汉式单例模式在第一次调用时才会实例化对象，之后不会再实例化，直接返回第一次创建的对象。该模式资源利用率高，而且有延时加载的优势。但是调用效率低。

-饿汉式单例模式

1class Singleton2{
2    private static people:Singleton2 = new Singleton2('饿汉式单例模式');
3    private name:string;
4    private constructor(name) {
5        this.name = name;
6    }
7    public static getInstance():Singleton2{
8        return Singleton2.people;
9    }
10    public say():void{\
11        console.log(this.name);
12    }
13}
14/*测试代码*/
15let s = Singleton2.getInstance();
16s.say(); //饿汉式单例模式

饿汉式单例模式类加载时立即实例化，之后返回实例化的对象。该模式调用效率高。因为加载时立刻实例化，所以没有延时加载的优势，并且没有用到这个实例的话，就会白白实例化一个对象，浪费资源。

Proxy实现单例模式

Proxy
是ES6语法新特性，用于修改对象某些操作的默认行为，也可以理解为在目标对象之前架设一层拦截，所有的访问都必须先通过这层拦截，因此提供了一种机制，可以对于外部的访问进行过滤和修改。利用该特性，我们可以将一个非单例模式的类包装成为单例模式。

1function singletonIfy(className):ProxyConstructor{
2    return new Proxy(className.prototype.constructor,{
3        construct(target: ProxyConstructor, argArray: any, newTarget?: any): object {
4            if(!this.instance){
5                // @ts-ignore
6                this.instance = new target(...argArray);
7            }
8            return this.instance;
9        }
10    })
11}
12
13class MyClass{
14    private readonly msg: string;
15    constructor(msg) {
16        this.msg = msg;
17    }
18    printMsg():void{
19        console.log(this.msg);
20    }
21}
22
23let MySingletonClass;
24MySingletonClass = singletonIfy(MyClass);
25const obj1 = new MySingletonClass('first');
26obj1.printMsg(); //first
27const obj2 = new MySingletonClass('second');
28obj2.printMsg(); //first

代理模式实现逻辑跟懒汉式单例模式相同，都是在调用时进行实例的初始化，之后的调用返回实例化的对象。

小结

本次分享使用TS介绍了单例模式的3种实现方式。

1function singleClass (className){
2    let ins 
3    return new Proxy(className, {
4        construct(target, args) {
5            if(!ins){
6                ins = new target(...args)
7            }
8            return ins
9        }
10    })
11}
12class BVideo {
13    constructor(){
14        console.log('create')
15    }
16}
17const Video = singleClass(BVideo)
18Video.prototype.play = function(){
19    console.log('play')
20}
21const v1 = new Video()
22const v2 = new Video()
23v1.play()
24console.log('vvvvv', v1===v2)

1export type Constructor<T> = new (...arg: any[]) => T;
2
3export function createSingleton<T extends object>(Cls: Constructor<T>): Constructor<T> {
4  let instance: T;
5  const handler: ProxyHandler<Constructor<T>> = {
6    construct(target, args: any[], newTarget: ProxyConstructor) {
7      if (!instance) {
8        instance = Reflect.construct(target, args, newTarget);
9      }
10      return instance;
11    },
12  };
13  return new Proxy(Cls, handler);
14}