CodeWalk

单例模式JS实现与使用场景

作者：我是大山 · 2026-05-30 12:55

请用JavaScript实现一个线程安全的单例模式，并说明在前端开发中哪些场景适合使用单例模式。

回答

我是大山

// 方式一：利用模块化（ES Module）天然单例
// singleton.js
export const singleton = {
  data: [],
  add(item) { this.data.push(item); }
};

// 方式二：闭包实现
const Singleton = (function() {
  let instance = null;
  function createInstance() {
    return { data: [], add(item) { this.data.push(item); } };
  }
  return {
    getInstance() {
      if (!instance) instance = createInstance();
      return instance;
    }
  };
})();

// 方式三：class + 静态方法
class SingletonClass {
  static #instance;
  constructor() {
    if (SingletonClass.#instance) return SingletonClass.#instance;
    SingletonClass.#instance = this;
  }
}

适用场景：全局状态管理(Vuex/Pinia/Redux store)、全局缓存、全局配置管理、日志记录器、请求拦截器、浏览器API封装(window.localStorage等)、模态框/loading等全局UI组件。