【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;
相关推荐
举个栗子dhy几秒前
解决在父元素上同时使用 onMouseEnter和 onMouseLeave时导致下拉菜单无法正常展开或者提前收起问题
前端·javascript·react.js
前端与小赵7 分钟前
vue3和vue2生命周期的区别
前端·javascript·vue.js
一鹿有你们~13 分钟前
面试题-前端如何解决跨域
前端·javascript·跨域
Sailing19 分钟前
👉 👉 Vue3 自定义 Hook:从入门到进阶(~~安静的阅读2分钟,相信我,这篇文章一定能给你启发)
前端·javascript·vue.js
一枚前端小能手36 分钟前
🚀 主线程卡死用户要骂娘?Web Worker让你的应用丝滑如德芙
前端·javascript
小桥风满袖39 分钟前
极简三分钟ES6 - Promise
前端·javascript
小高00740 分钟前
性能优化零成本:只加3行代码,FCP从1.8s砍到1.2s
前端·javascript·面试
用户669820611298241 分钟前
vue3 hooks、utils、data这几个文件夹分别是放什么的?
javascript·vue.js
子兮曰41 分钟前
🌏浏览器硬件API大全:30个颠覆性技术让你重新认识Web开发
前端·javascript·浏览器