【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;
相关推荐
Mr.Jessy21 分钟前
JavaScript高级:深浅拷贝、异常处理、防抖及节流
开发语言·前端·javascript·学习
唐叔在学习27 分钟前
30s让ai编写「跳过外链中转页」的油猴脚本
前端·javascript
API技术员1 小时前
item_get_app - 根据ID取商品详情原数据H5数据接口实战解析
javascript
八哥程序员1 小时前
Chrome DevTools 详解系列之 Elements面板
javascript·浏览器
coderHing[专注前端]1 小时前
告别 try/catch 地狱:用三元组重新定义 JavaScript 错误处理
开发语言·前端·javascript·react.js·前端框架·ecmascript
UIUV1 小时前
JavaScript中this指向机制与异步回调解决方案详解
前端·javascript·代码规范
momo1001 小时前
IndexedDB 实战:封装一个通用工具类,搞定所有本地存储需求
前端·javascript
San301 小时前
从零到一:彻底搞定面试高频算法——“列表转树”与“爬楼梯”全解析
javascript·算法·面试
JellyDDD2 小时前
h5上传大文件可能会导致手机浏览器卡死,重新刷新的问题
javascript·上传文件
T___T3 小时前
一个定时器,理清 JavaScript 里的 this
前端·javascript·面试