单例模式

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

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

  • 单例模式有什么用，什么时候用？
  • 单例模式怎么写？
  • 在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); // testa.changeName('name change');console.log(a.name); // name changelet b = getTestInstance();console.log(b.name); // name changeb.changeName('name change2');console.log(b.name); // name change2console.log(a.name); // name change2console.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);