深刻浅出js单例模式

何为单例模式？顾名思义，单例模式就是保证一个类仅有一个实例，也就是建立出来的两个实例必须相等！

构造函数静态属性建立单例

function Singleton() {
      // 已有实例则返回该实例，没有则建立实例
      if (typeof Singleton.instance === 'object') {
        return Singleton.instance
      }
      // 把本身绑定到insta静态属性上，保证每次建立相同实例
      Singleton.instance = this
    }
    var sigle1 = new Singleton()
    var sigle2 = new Singleton()
    console.log(sigle1 === sigle2)  // true 两个实例相等
    sigle1.instance = 123
    console.log(sigle2.instance) // 123

该方法的缺点是，instance属性暴露外面，改变一个实例的属性，另外一个也会跟着改变！ 实例sigle1.instance的改变的同时sigle2.instance也跟着同时也变化了，这不是咱们但愿要的结果！

构造函数建立不透明单例

const Singleton = function (name) {
      this.name = name
      this.instance = null
    }
    Singleton.getInstance = function (name) {
      // 单例已建立则返回，未建立则建立并返归
      return this.instance || (this.instance = new Singleton(name))
    }
    Singleton.prototype.getName = function () {
      return this.name
    }
    var instance1 = Singleton.getInstance('instance1')
    var instance2 = Singleton.getInstance('instance2')
    console.log(instance1 === instance2) // true 两个实例相等
    console.log(instance1.getName(), instance2.getName()) // instance1 instance1

和上一个案例相似，利用构造函数的静态熟悉存储单例，可是该单例并不能改变instance属性。然而，该方法建立单例具备不透明性，须要具体告知用户如何使用。

利用闭包建立单例

function Singleton() {
      var Man = function (name) {
        this.name = name
      }
      var instance
      // 函数中返回函数，且返回函数中占用instance，造成闭包，instance惟一
      return function (arg) {
        if (!instance) {
          instance = new Man(arg)
        }
        return instance
      }
    }
    var single = Singleton()
    console.log(single('tom') === single('jack')) // true 两个实例相等

和上面一个案例同样，用闭包建立单例具备不透明性，并且容易形成内存泄漏。好了说了这么多实现单例的方式，接下来讲说单例在工做中的具体使用状况。

单例的实际使用

咱们html页面中的提示遮罩框就可使用单例来建立，由于建立一次，重复使用，不必再次建立相同遮罩框。这边我就不写具体遮罩框的样式了，嘿嘿。

//  在html页面建立点击按钮
    
    <button id="app">点我建立单例</button>

// 利用当即执行函数建立遮罩框layer
    var creatLayer = (function(innerHTML){
      var layer
      return function(innerHTML){
        if(!layer){
          layer = document.createElement('div')
          layer.innerHTML = innerHTML
          layer.style.display = 'none'
          document.body.appendChild(layer)
        }
        return layer
      }
    })()
    // 点击按钮弹出遮罩框
    document.getElementById('app').onclick = function(){
      var layer = creatLayer('我是遮罩框')
      layer.style.display = 'block'
    }

不管按钮点击多少次，始终只有建立一个遮罩框，从而避免重复建立。不过边creatLayer函数中含有大量业务代码。遵循高内聚，低耦合的思想，咱们进行改造！

// 把业务代码写到creatLayer函数
    var creatLayer = function (innerHTML) {
      var layer = document.createElement('div')
      layer.innerHTML = innerHTML
      layer.style.display = 'none'
      document.body.appendChild(layer)
      return layer
    }
    // 单例单例判断交给getSingle函数，和业务逻辑分开
    var getSingle = function (fn) {
      var div
      return function () {
        return div || (div = fn.apply(this, arguments))
      }
    }
    var layer = getSingle(creatLayer)
    document.getElementById('app').onclick = function () {
      var div = layer('我是遮罩框')
      div.style.display = 'block'
    }

好了，单例模式具体介绍到这里了。若是想看更多的设计模式，能够看我晚期设计模式系列文章。若是以为对你有帮助的话，记得给个赞哈😃