单例模式

保证一个类仅有一个实例，并提供一个访问它的全局访问点，这样的模式就叫做单例模式

实现思路

单例模式想要做到的是，不管我们尝试去创建多少次，它都只给你返回第一次所创建的那唯一的一个实例。

实现方案有多种，大体上分ES5（Function）与ES6（Class）两种

方式1

利用instanceof判断是否使用new关键字调用函数进行对象的实例化

function User() {
  if (!(this instanceof User)) {
    return
  }
  if (!User._instance) {
    this.name = '无名'
    User._instance = this
  }
  return User._instance
}

const u1 = new User()
const u2 = new User()

console.log(u1 === u2)// true

方式2

在函数上直接添加方法属性调用生成实例

function User() {
  this.name = '无名'
}
User.getInstance = function () {
  if (!User._instance) {
    User._instance = new User()
  }
  return User._instance
}

const u1 = User.getInstance()
const u2 = User.getInstance()

console.log(u1 === u2)

方式3

使用闭包，改进方式2

function User() {
  this.name = '无名'
}
User.getInstance = (function () {
  let instance
  return function () {
    if (!instance) {
      instance = new User()
    }
    return instance
  }
})()

const u1 = User.getInstance()
const u2 = User.getInstance()

console.log(u1 === u2)

方式4

使用包装对象结合闭包的形式实现

const User = (function () {
  function _user() {
    this.name = 'xm'
  }
  return function () {
    if (!_user.instance) {
      _user.instance = new _user()
    }
    return _user.instance
  }
})()

const u1 = new User()
const u2 = new User()

console.log(u1 === u2) // true

当然这里可以将闭包部分的代码单独封装为一个函数

在频繁使用到单例的情况下，推荐使用类似此方法的方案

function SingleWrapper(cons) {
  // 排出非函数与箭头函数
  if (!(cons instanceof Function) || !cons.prototype) {
    throw new Error('不是合法的构造函数')
  }
  let instance
  return function () {
    if (!instance) {
      instance = new cons()
    }
    return instance
  }
}

function User() {
  this.name = 'xm'
}
const SingleUser = SingleWrapper(User)
const u1 = new SingleUser()
const u2 = new SingleUser()
console.log(u1 === u2)

方式5

在构造函数中利用new.target判断是否使用new关键字

class User {
  constructor() {
    if (new.target !== User) {
      return
    }
    if (!User._instance) {
      this.name = 'xm'
      User._instance = this
    }
    return User._instance
  }
}

const u1 = new User()
const u2 = new User()
console.log(u1 === u2)

方式6

使用static静态方法

class User {
  constructor() {
    this.name = 'xm'
  }

  static getInstance() {
    if (!User._instance) {
      User._instance = new User()
    }
    return User._instance
  }
}

const u1 = User.getInstance()
const u2 = User.getInstance()

console.log(u1 === u2)

面试题

例1

实现Storage，使得该对象为单例，基于 localStorage 进行封装。实现方法 setItem(key,value) 和 getItem(key)。

静态方法

class Storage {
  static getInstance() {
    if (!Storage.instance) {
      Storage.instance = new Storage()
    }
    return Storage.instance
  }

  setItem(key, value) {
    localStorage.setItem(key, value)
  }

  getItem(key) {
    return localStorage.getItem(key)
  }
}
const s1 = Storage.getInstance()
const s2 = Storage.getInstance()
console.log(s1 === s2) // true
s1.setItem('abc', 666)
console.log(s2.getItem('abc')) // 666

闭包

function baseStorage() { }
baseStorage.prototype.setItem = function (key, value) {
  localStorage.setItem(key, value)
}
baseStorage.prototype.getItem = function (key) {
  return localStorage.getItem(key)
}
const Storage = (function () {
  let instance = null
  return function () {
    if (!instance) {
      instance = new baseStorage()
    }
    return instance
  }
})()

const s1 = new Storage()
const s2 = Storage()
console.log(s1 === s2) // true
s1.setItem('abc', 666)
console.log(s2.getItem('abc')) // 666

例2

实现一个全局的模态框

预览

使用构造函数

.global-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: 150px;
    background-color: grey;
    padding: 10px;
}

    <button id="open">open</button>
    <button id="close">close</button>

class Modal {
  constructor(msg) {
    const modal = document.createElement('div')
    modal.textContent = msg
    modal.classList.add('global-modal')
    modal.style.display = 'none'
    this.modal = modal
    document.body.append(modal)
  }

  show() {
    this.modal.style.display = 'block'
  }

  hide() {
    this.modal.style.display = 'none'
  }
}
class GlobalModal {
  constructor() {
    if (!GlobalModal.instance) {
      GlobalModal.instance = new Modal('666')
    }
    return GlobalModal.instance
  }
}
const a = new GlobalModal()
const b = new GlobalModal()
document.getElementById('open').addEventListener('click', () => {
  a.show()
})
document.getElementById('close').addEventListener('click', () => {
  b.hide()
})