【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;
相关推荐
山河木马1 小时前
渲染管线-计算得到gl_Position(顶点着色器)之后续GPU流程
javascript·webgl·图形学
竹林8181 小时前
用 The Graph 查询链上数据实战:从手搓 RPC 到 Subgraph,我的 NFT 项目数据加载快了 10 倍
前端·javascript
kyriewen4 小时前
别再每次都 Google 了:我整理了前端日常最常踩的 10 个 Git 坑,附速查表
前端·javascript·git
SmartBoyW5 小时前
深入ECMAScript规范:彻底搞懂JS隐式类型转换与底层ToPrimitive机制
前端·javascript
用户852495071845 小时前
解密 JavaScript 中的 this:谁才是真正的调用者?
javascript·面试
Heo5 小时前
Vite进阶用法详解
前端·javascript·面试
铁皮饭盒7 小时前
Next.js 风格路由内置?Bun FileSystemRouter 凭啥这么香
javascript
小林ixn8 小时前
别再背八股了!从 5 个真实场景彻底搞懂 JavaScript 的 this
javascript
东风破_8 小时前
JavaScript 面试常考的字符串算法:从反转字符串到回文判断
前端·javascript
巴勒个啦8 小时前
D3.js 入门实战:用力导向图可视化项目依赖关系
javascript