用JS来理解设计模式——单例模式
单例模式单例模式确保一个类只有一个实例，并提供一个全局访问点。
单例模式应该算是一个设计模式中比较简单且好用的模式，大部分人或多或少都接触过这个模式。所以也不举什么例子了，先来问几个问题，如果都了解的话，也就不用往下看了。
· 单例模式有什么用，什么时候用？
· 单例模式怎么写？
· 在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. 2.虽然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);
页:
[1]
