基于JavaScript实现单例模式

2023年6月10日下午10:43 • JavaScript

让我来详细讲解一下“基于JavaScript实现单例模式”的完整攻略。

什么是单例模式？

单例模式是一种设计模式，它保证一个类只有一个实例，并提供一个全局访问点来访问这个实例。在JavaScript中，由于它是一种动态语言，所以没有像Java、C++等静态语言那样的固有的单例模式实现方式，但是我们可以用JavaScript的一些语言特性来模拟出单例模式。

单例模式的实现

在JavaScript中，我们可以通过使用闭包或者静态属性来实现单例模式。

1. 闭包实现

使用闭包实现单例模式非常简单，我们只需要将实例保存到闭包中并返回一个函数即可。

const Singleton = (() => {
  let instance;

  function createInstance() {
    const object = new Object({name: 'singleton'});
    return object;
  }

  return {
    getInstance: () => {
      if (!instance) {
        instance = createInstance();
      }
      return instance;
    }
  };
})();

const singleton1 = Singleton.getInstance();
const singleton2 = Singleton.getInstance();

console.log(singleton1 === singleton2); // 输出 true

上述代码中，我们使用了一个立即执行函数(IIFE)来创建Singleton实例，将实例保存到了闭包中，并返回了getInstance方法。getInstance方法用于获取单例实例，如果实例不存在，则通过createInstance方法创建一个单例实例并返回；如果实例已经存在，则直接返回实例对象。通过这样的方式，我们就实现了单例模式。

2. 静态属性实现

在ES6中，我们可以使用class中的静态属性来实现单例模式。

class Singleton {
  static instance;

  constructor() {
    if (Singleton.instance) {
      return Singleton.instance;
    }
    Singleton.instance = this;
    this.name = 'singleton';
  }
}

const singleton1 = new Singleton();
const singleton2 = new Singleton();

console.log(singleton1 === singleton2); // 输出 true

上述代码中，在Singleton类中，我们使用了一个静态属性instance来保存实例，并在constructor中判断实例是否存在。如果实例已经存在，则直接返回这个实例对象；如果实例不存在，则将当前实例保存为静态属性，并返回实例对象。通过这样的方式，我们也是实现了单例模式。

单例模式的应用场景

单例模式可以用在很多场景中，比如全局缓存、全局状态管理等，下面通过两个示例来详细说明：

1. 单例模式实现全局缓存

class Cache {
  static instance;
  cache = {};

  constructor() {
    if (Cache.instance) {
      return Cache.instance;
    }
    Cache.instance = this;
  }

  set(key, value) {
    this.cache[key] = value;
  }

  get(key) {
    return this.cache[key];
  }
}

const cache1 = new Cache();
cache1.set('name', 'Jack');
console.log(cache1.get('name')); // 输出 Jack

const cache2 = new Cache();
console.log(cache2.get('name')); // 输出 Jack

上述代码中，我们通过使用单例模式实现了全局缓存。我们在Cache类中定义了一个静态属性instance来保存实例，并在constructor中通过判断instance是否存在来实现单例模式。在Cache类中，我们实现了set和get方法来设置和获取缓存数据。通过这样的方式，我们可以在整个应用中共享一个缓存实例。

2. 单例模式实现全局状态管理

class Store {
  static instance;
  state = {counter: 0};

  constructor() {
    if (Store.instance) {
      return Store.instance;
    }
    Store.instance = this;
  }

  setState(newState) {
    this.state = {...this.state, ...newState};
  }

  getState() {
    return this.state;
  }
}

const store1 = new Store();
store1.setState({counter: store1.getState().counter + 1});
console.log(store1.getState().counter); // 输出 1

const store2 = new Store();
store2.setState({counter: store2.getState().counter - 1});
console.log(store2.getState().counter); // 输出 0

上述代码中，我们通过使用单例模式实现了全局状态管理。我们在Store类中定义了一个静态属性instance来保存实例，并在constructor中通过判断instance是否存在来实现单例模式。在Store类中，我们实现了setState和getState方法来设置和获取全局状态数据。通过这样的方式，我们可以在整个应用中共享一个状态实例，方便管理应用的全局状态。