(十二) 简单理解 js设计模式之单例模式

1. 什么是单例模式

单: 单一, 一个

例: 实例

所谓的单例, 就是指一个类只有一个实例, 不管你 new 多少次, 都是这一个实例

具体的实现思路就是:

• 先判断实例是否存在
• 如果存在则直接将实例返回
• 如果不存在, 就创建了再返回

先看一个普通的实例化

function Person() {
  this.name = '猫'
}

const p1 = new Person()
const p2 = new Person()

console.log(p1, p2);
console.log(p1 == p2);

单例模式就是帮助我们把这里的 false变成 true

回过头看上面的思路, 有两个重要的点:

• 怎么判断实例是否存在 ?
• 将实例返回意味着什么 ?

对于上面两个问题:

• 我们是不是可以提前设置一个用于实例化的变量, 但是不赋值
• 注意第二个问题中的 返回, 两个字, 意味着我们需要在函数内部完成

单例的简单实现

function Person() {
  this.name = '猫'
}

// 单例模式的核心代码
// 标识flag
var instance
// 单例模式的核心代码
function singleTon() {
  if (!instance) instance = new Person()

  return instance
}

const p1 = singleTon()
const p2 = singleTon()

console.log(p1, p2);
console.log(p1 == p2);

原理是什么:

• 第一次执行 singleTon, 因为标识 instance 是undefined, 取反以后就是 true, 此时就会创建Person的一个实例, 然后将其返回, 当我们第二次调用 singleTon, 因为 instance 是全局变量, 会被一直保存, 所以此时instance 的值为刚刚的实例对象, 此时再取反就是false, 会将instance 直接返回除去, 也就实现的只有一个实例

因为全局变量带来的某些负面影响,我们应当尽可能少的使用全局变量, 如果我们将 instance 声明成局部变量, 函数执行完后局部变量又会被释放, 怎么办 ?

这时候闭包站出来了, 闭包说: 我可以帮助你们保存函数的上下文环境, 让局部变量一直存在

既然如此, 那咱们就写写看呗

var singleTon = (function () {
	
  // 将类移到自执行函数内部, 是为了不对外暴露内部实现
  function Person() {
    this.name = '猫'
  }
  
  let instance
  return function () {
    if (!instance) instance = new Person()

    return instance
  }
})()

const p1 = singleTon()
const p2 = singleTon()

console.log(p1, p2);
console.log(p1 === p2);

2. 单例模式有什么作用

单例模式主要的用途就是 网页弹出框 的开发

比如说, 我们需要开发一个登录框和一个注册框, 两者的整体布局大致相同, 有如下思路

• 分别开发两个弹出框
• 开发一个弹出框, 实例化出登录框和注册框, 各自的细节各自再实现

两者相比, 是不是高下立判