JavaScript单例模式与开发实践(一)

前言

作为一个前端切图仔，少有和各类设计模式打交道。但这不影响我们学习设计模式的思维，来提升我们的代码水平。

本章通过讲解单例模式，希望能够让你对设计模式更一步的学习。

本章学习内容👇

• 认识单例模式
• 完成一个单例模式

单例模式

什么是单例模式？

单例模式：保证一个类仅有一个实例，并提供一个访问它的全局访问点

这么说好像比较抽象，但这个单例模式我们却又很熟悉。

有一些对象我们往往只需要一个，比如全局缓存、VueX、**浏览器中的window对象**等等。

这些都符合只有一个实例，并且有一个全局访问点。

这样一看，是不是恍然大悟了。其实我们一直都在使用单例模式。

实现单例模式

回顾下单例模式的俩个特点：

• 保证一个类仅有一个实例
• 提供一个全局访问点

要实现这俩个特点其实很简单，我们只需要👇

• 在这个类中用一个变量来标注是否创建过实例，如果已经创建过那么在下一次就直接返回这个实例
• 使用一个全局变量来保存已创建的实例

let obj = null
class SingleCase{
    constructor(name) {
        if (obj){//判断实例是否创建过
            obj.name = name
            return obj
        }else{
            this.name = name
            obj = this
        }
​
    }
}
​
let obj1 = new SingleCase(1)
console.log(obj1)
let obj2 = new SingleCase(2)
console.log(obj1)
console.log(obj2)
console.log(obj1 == obj2)

在以上代码中，我们声明了一个SingleCase的类以及一个全局对象。在类的构造函数中，我们通过判断这个全局实例是否创建来执行不同的处理，从而完成了单例模式。

控制台输出👇

SingleCase { name: 1 }
SingleCase { name: 2 }
SingleCase { name: 2 }
true

根据控制台打印，我们能够清晰的知道👇

• 通过new SingleCase 创建的a 和 b 使用的是同一个对象

我们通过定义全局变量的方法完成了单例模式，但是这样其实不是正确的。因为这样会导致，SingleCase之类的单例类都需要定义一个我们所不知道的全局变量。而正常来说的话应该是讲变量保存在单例类内部。

尾声

在下一章节，我们不再用全局变量，会实现一个和普通类一样使用的单例