用JS来理解设计模式—— 单例模式

Posted 2021-09-29 Callas

单例模式

单例模式确保一个类只有一个实例，并提供一个全局访问点。

单例模式应该算是一个设计模式中比较简单且好用的模式，大部分人或多或少都接触过这个模式。所以也不举什么例子了，先来问几个问题，如果都了解的话，也就不用往下看了。

• 单例模式有什么用，什么时候用？
• 单例模式怎么写？
• 在JS里用单例模式时可能会出什么问题？

单例模式有什么用，什么时候用？

很简单，在上面的定义以及模式的名字就能看出来，这个模式的用处就是保证我们拿到的对象永远是同一个，不论是在代码的什么地方，也不论是在何时。

举几个例子，比方说一个提示弹窗，一般来说这种提示弹窗通常不会同时展示多个出来，但假如短时间内多次调用生成提示弹窗的方法，则有可能会出现多个提示弹窗。但假若采用了单例模式来，我们拿到的永远是同一个提示弹窗，只会在同一个提示弹窗上进行修改，就不用担心多个弹窗出现的情况。

再比方说，当我们创建的一个对象所花销的时间较长，且这个对象属于可复用的，又可能需要频繁使用时，就可以采用单例模式，比较常见的就是创建编辑器这类对象等等。

书里有提到一个大家可能会有的问题，那就是写一个大家约定好的全局变量不也一样吗？因为这样也能够实现单例模式所需要的效果，无论是在何时何地拿到的都是同一个对象。确实这样子也是可以做到单例的效果，但是有几个问题。

1.假如创建这个对象过程非常消耗资源，然后我们却一直没用使用到，那么不就是形成浪费了吗，即浪费了生成的时间，也浪费了其占据的内存空间。

2.如何保证这个对象只会被实例化一次？生成这个对象的方法会不会暴露出来，使得其他开发人员选择在其他地方自己调用？

这里也说到了一个很重要的点，就是构造这个对象的方法应当是“私有”的，不能够被直接调用，否则这个方法也没什么意义了。

单例模式怎么写？

首先需要和大家说明，我写这个代码是根据自己的理解来写的，写之前没参考别人的写法，所以可能会有一些问题，欢迎大家指出。

let getTestInstance = (function () {
  let instance = null;
  class Test {
    constructor (name) {
      this.name = name || \'test\'
    }
    changeName (name) {
      this.name = name;
    }
  }
  return function (...args) {
    if (!instance) instance = new Test(...args);
    return instance;
  }
})();

let a = getTestInstance();
console.log(a.name); // test
a.changeName(\'name change\');
console.log(a.name); // name change

let b = getTestInstance();
console.log(b.name); // name change

b.changeName(\'name change2\');
console.log(b.name); // name change2
console.log(a.name); // name change2
console.log(a === b); // true

这里的实现比较简单，主要是通过闭包，将我们的单例和构造函数“私有化”，无法直接访问，从而保证拿到的都是同一个对象，且只能通过getTestInstance方法来获取。这样我们就能确保一个类只有一个实例，且只能通过我提供的这个访问点来获取，这样就符合了单例模式的要求。

单例模式确保一个类只有一个实例，并提供一个全局访问点。

我们可以看到变量a与变量b其实指向的都是同一个实例，因此不论是a对实例的改变或是b，都会互相影响。

这里的代码实现例子是一个简单的例子，不过还有一些特殊的情况需要考虑。

在JS里用单例模式时可能会出什么问题？

1. 多线程问题
2. 异步生成实例问题

多线程问题

多线程问题指的是假若有几处代码同时调用了获取实例方法，且实例尚且未生成，那么可能出现这几处的实例不一致的情况。众所周知JS是一个单线程模型，所有任务只能在一个线程上完成，一次只能做一件事。前面的任务没做完，后面的任务只能等着。

不过现在有了webWorker，JS也拥有了多线程环境，那么我们就可以进行尝试在JS多线程中是否会存在单例模式的多线程问题。

思路是：新建多个webworker，并且在webWorker中引入getTestInstance方法，然后将webWorker中的生成的实例返回给主流程，在主流程中进行对象比较。

然而经过尝试发现，在webWorker中使用importScripts引入的js是互相独立的，这意味着生成的实例都是不一样的，那么引入js这条路子就断了。

因此我就想办法将主流程中的getTestInstance方法传入到webWorker里面，其中我采用了两种方法，但都以失败告终。分别是：

1. 将getTestInstance方法用postMessage传入。
2. 由于webWorker中线程所在的全局对象，与主线程不一样，无法读取主线程所在网页的 DOM 对象，也无法使用document、window、parent这些对象。但是，Worker 线程拥有navigator对象和location对象。利用这个特点，我尝试将getTestInstance方法挂在location对象上。

但两者的结果分别是：

1. 无法将方法传入到webWoker，这里应该是底层限制，无法解决。

app.js:15 Uncaught DOMException: Failed to execute \'postMessage\' on \'Worker\': function (...args) {
      if (!instance) instance = new Test(...args);
      return instance;
    } could not be cloned. 

1. 虽然webWorker确实拥有location对象，但它的location对象很特殊，是WorkerLocation，且不同Worker之间的WorkerLocation都是独立的。因此无法在location对象上获取到getTestInstance方法。

因此可以片面的说在JS多线程中无法使用单例模式。

异步生成实例问题

这个问题主要是讨论如果生成实例的方法是一个异步的方法，那么在异步方法执行完成前，有别处代码调用了获取实例方法，那么是不是会产生多次调用或实例不一致的问题？

因此实现上有所不同，但其实也很简单，就是返回的值变成Promise且多加几个状态控制而已，下面是实现代码，如有遗漏或错误，欢迎指出。

let getTestInstance = (function () {
    let instance = null;
    let loading = false; // 判断是否正在生成中
    let loadingPrmoise = null; // 用于记录第一次生成的promise
    class Test {
      constructor (name) {
        this.name = name || \'test\'
      }
      changeName (name) {
        this.name = name;
      }
    }
    return function (...args) {
      if (instance) return Promise.resolve(instance);
      if (loading) return loadingPrmoise;
      loading = true;
      // 一个2S的生成实例过程
      let promise = new Promise((resolve, reject) => {
        setTimeout(() => {
          instance = new Test(...args);
          loading = false;
          resolve(instance);
        }, 2000)
      });
      loadingPrmoise = promise;
      return promise;
    }
  })();

  let a,b;
  // 生成实例需要2S
  getTestInstance().then(res => {
    a = res;
  });
  // 1S秒再次获取实例
  setTimeout(() => {
    getTestInstance().then(res => {
      b = res;
      console.log(a === b) // true
      getTestInbstance().then(res => {
          console.log(a === res); // true
      })
    });
  }, 1000);