【JavaScript设计模式】Singleton Pattern

单例是可以被实例化一次的类,并且可以被全局访问。这个实例可以在整个应用程序中共享,这使得singleton非常适合管理应用程序中的全局状态。

首先,让我们看看使用ES2015类的单例是什么样子的。在这个例子中,我们将构建一个Counter类,它具有:

  • getInstance 方法:返回一个Counter实例;
  • getCount 方法:获取当前的计数值;
  • increment 方法:计数值加1;
  • decrement 方法:计数值减1;
javascript 复制代码
let counter = 0;

class Counter {
  getInstance() {
    return this;
  }

  getCount() {
    return counter;
  }

  increment() {
    return ++counter;
  }

  decrement() {
    return --counter;
  }
}

const counter1 = new Counter();
const counter2 = new Counter();

console.log(counter1.getInstance() === counter2.getInstance()); // false

显然,这个类不符合Singleton的标准! Singleton应该只能实例化一次,上例我们可以创建多个Counter类实例。

下面,我们再对上述的例子进行改造,以保证只能创建一个唯一的Counter实例。

javascript 复制代码
let instance;
let counter = 0;

class Counter {
  constructor() {
    if (instance) {
      throw new Error("You can only create one instance!");
    }
    instance = this;
  }

  getInstance() {
    return this;
  }

  getCount() {
    return counter;
  }

  increment() {
    return ++counter;
  }

  decrement() {
    return --counter;
  }
}

const counter1 = new Counter();
const counter2 = new Counter();

为了提高Counter单例的安全性,我们可以使用Object.freeze。并将Counter作为一个模块使用。

javascript 复制代码
const singletonCounter = Object.freeze(new Counter());
export default singletonCounter;
相关推荐
码云社区15 分钟前
智慧物业系统选型指南:房屋档案、账单管理与报修协作
前端·javascript·vue.js·智慧物业
code_Bo14 小时前
不只命令行:我把跨 Agent 会话同步做成了桌面应用
前端·javascript·后端
kyriewen14 小时前
AI 能把页面写出来,为什么改个需求就开始崩?
前端·javascript·人工智能
OpsEye14 小时前
同一套用例跑两个大模型接口,差异到底出在哪
javascript·ai编程
X1A0RAN15 小时前
PPT 图片批量处理教程:导出全部幻灯片 · 提取全部素材
开发语言·javascript·powerpoint
量化分析码农16 小时前
股票历史数据的复权参数对照:多级别返回的字段与数值差异
java·javascript·后端
天才熊猫君18 小时前
给 Vue 的 reactive 套 Proxy,为什么响应式会失灵?
前端·javascript
用户27639657651020 小时前
放弃 JWT 后,我给 FastAPI 游戏服务端手撸了一套 token session
javascript
用户842981424181021 小时前
从 JavaScript 到可运行的字节码 - ByteJS 使用指南
javascript
学以智用21 小时前
wangEditor V5 精简完整参考手册
javascript