Skip to content

单例模式

作者:Choi Yang
更新于:6 个月前
字数统计:1.3k 字
阅读时长:4 分钟
阅读量:

前言

还记得当年校招的时候,我鼓起勇气吹了自己懂一点设计模式,本来以为会是面试利器,可以和面试官交流一波。

没想到第一个问的就是单例模式,而我当时就大概学了一手 vue 源码中的代理模式和装饰者模式。

我当时的回答是,单例模式就是只能实例化一次,单个实例...

现如今当我真正了解了单例模式之后,越发觉得当时知识点是多么的浅陋。

概念

单例模式中的单例就是指实例化一次,就可以在全局访问了,也就是在整个应用程序中均可以共享。

直接看下面这个例子:

js
let counter = 0

class Counter {
  getInstance() {
    return this
  }

  getCount() {
    return counter
  }

  increment() {
    return ++counter
  }

  decrement() {
    return --counter
  }
}

上述代码,还会有问题,单例模式只能实例化一次,如下所示,我们可以多次实例化,实例化出来的对象也是可以修改的。

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

Demo

解决多次实例化以及可修改问题

对于多实例化问题,我们可以通过变量来保存一下实例,如果实例化过了,那么就会有报错提示,如下创建了一个 instance 变量。

对于可修改问题,我们可以将实例化出来的对象用

方法冻结一下。

一个被冻结的对象再也不能被修改;冻结了一个对象则不能向这个对象添加新的属性,不能删除已有属性,不能修改该对象已有属性的可枚举性、可配置性、可写性,以及不能修改已有属性的值。此外,冻结一个对象后该对象的原型也不能被修改。freeze() 返回和传入的参数相同的对象。

js
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 singletonCounter = Object.freeze(new Counter()) 
export default singletonCounter 

基于以上代码,我们在不同文件引入,当我们调用增加或者减少的时候,会发现 count 值都会变化。

Demo

优缺点

优点

通过限制仅仅实例化一次,即只有单个实例,可以节省大量内存空间,我们不必每次都 new 一下,开新的空间了。

不过由于 JavaScript 特殊性,我们其实可以直接创建对象,根本不需要 new,其它面向对象的编程语言(比如 Java、C++),需要创建类 class,然后再 new 一个对象,也就是我们常常说的,没对象咋办,自己 new 一个呗~

如下,我们不需要像上文那样利用 class 然后再 new 一个对象,而可以直接创建一个对象:

js
let count = 0

const counter = {
  increment() {
    return ++count
  },
  decrement() {
    return --count
  },
}

Object.freeze(counter)
export { counter }

不足

  • 测试

对于自动化测试来说的话,因为不能新创建实例,这就会导致之后的测试用例会依赖于之前的测试,那么在测试的过程中顺序很重要。

  • 全局问题

单例模式共享很好,但是把一个变量放在全局多多少少会出现一些意外的问题。还有一种是组件之前相互依赖,那么对于数据流的理解也会变得复杂,在不同的组件调用来调用去,代码逻辑也会显得很混乱。

React 当中的状态管理

在 React 中,想必大家也比较熟悉了,常用的 Redux 以及相关的拓展工具,还有 React 的一个 Hook,React Context,以及我平常也会用的

这些只能说是与单例模式相似,但从概念和定义来看,其实是对于单例模式进行了修改与优化。

这些工具提供了仅读取状态,而上文所表述的单例模式状态其实是可变的。

在使用 Redux 时,我们不会直接去操作数据,而是在组件中通过 action 来 dispatch 一下,通知 reducer 帮我们更新数据。

可能一开始会觉得这样做是不是多此一举了,但其实这样可以避免我们直接操作数据,对于全局共享的值我们又可以进行改变,数据更新就交给 reducer 去做就好了,在组件使用角度,我们依旧还是在读取数据。

文章内容并不代表权威,如若有任何表述问题,欢迎大家提出以及共建文档。

Contributors

Choi Yang
HearLing