【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;
相关推荐
shawxlee10 小时前
vue3在public下封装config.js自定义配置动态数据,可在打包后直接修改,方便后端部署及后续维护
前端·javascript·经验分享·vue·团队开发·js·项目优化
kyriewen11 小时前
我给前端项目的接口请求套了6层保护——才发现以前一直在裸奔
前端·javascript·面试
郝亚军12 小时前
如何安装webstorm、Node.js和vue CLI
前端·javascript·vue.js
葬送的代码人生13 小时前
别再让 AI 瞎写代码了!Vibe Coding 三步法教你写出靠谱代码
前端·设计模式·架构
an3174214 小时前
6MB 组织树大文件性能优化全流程
前端·javascript·vue.js
TeamDev15 小时前
JxBrowser 9.3.1 版本发布啦!
java·前端·javascript·c#·混合应用·jxbrowser·浏览器控件
整點薯條15 小时前
Vue3+vite创建项目架构文件说明总结
前端·javascript·vue.js
无风听海16 小时前
Claude Agent Skills 的四种设计模式;从渐进式披露到最小权限
java·算法·设计模式
前端甜糖17 小时前
记录We码开发者工具的一个bug
前端·javascript
猫32817 小时前
echarts 日常问题解决
前端·javascript·echarts