单例模式在前端开发过程中非常常见，通俗来说就是某个类只能有一个实例，只能实例化一次，之后所有实例化的操作都是返回之前已经实例化的实例。
UML：
实现单例
利用es6实现单例模式：
class Singleton {
constructor() {
if (!Singleton.instance) {
Singleton.instance = this;
}
return Singleton.instance;
}
}
const single = new Singleton()
const single2 = new Singleton()
console.log(single === single2); // true
可以看到single和single2是相等的，因为single2创建实例的时候返回的还是上一次的实例，无论之后调用多少次都是如此。
利用闭包实现单例模式：
const singleton = (function () {
function Person() {}
let singleInstance;
return function () {
// 第一次实例化时
if (!singleInstance) {
singleInstance = new Person()
}
// 直接返回
return singleInstance;
};
})();
const single = singleton();
const single2 = singleton();
console.log(single === single2); // true
Person需要放在IIFE中，若是放到外面，此时用户是可以直接new Person实例化，并不能很好的控制，放在IIFE中可以防止外部直接实例化。
若是此时需要再创建一个类的单例，这样实现的单例模式便需要重新CV一份代码，显然是不符合我们的预期的，因此需要将上述代码进行改造:
function Person() {}
/**
* constructor： 将需要单例的类 通过参数传递
*/
const singleton = function (constructor) {
let singleInstance;
return function () {
// 第一次实例化时
if (!singleInstance) {
constructor.apply(this, arguments);
Object.setPrototypeOf(this, constructor.prototype);
singleInstance = this;
}
// 直接返回
return singleInstance;
};
};
const createPerson = singleton(Person)
const p = new createPerson();
const p2 = new createPerson();
console.log(p === p2); // true
需要注意Object.setPrototypeOf(this, constructor.prototype);,若是不讲this的prototype指向重新指向到constructor，那么通过此进行的实例对象是不能调用constructor.prototype上面的方法的，因为此时this的prototype指向是singleton函数中return的匿名函数。
使用Object.setPrototypeOf改变prototype的指向是并不是一件理想的事情
警告: ** 由于现代 JavaScript 引擎优化属性访问所带来的特性的关系，更改对象的[[Prototype]]在各个*浏览器和 JavaScript 引擎上都是一个很慢的操作。其在更改继承的性能上的影响是微妙而又广泛的，这不仅仅限于obj.__proto__ = ...语句上的时间花费，而且可能会延伸到任何*代码，那些可以访问*任何***[[Prototype]]已被更改的对象的代码。如果你关心性能，你应该避免设置一个对象的[[Prototype]]。相反，你应该使用Object.create()来创建带有你想要的[[Prototype]]的新对象。
终极版本：
主要变动singleton函数，其他代码保持不变。
const singleton = function (constructor) {
let singleInstance;
let singleConstructor = function () {
// 第一次实例化时
if (!singleInstance) {
constructor.apply(this, arguments);
singleInstance = this;
}
// 直接返回
return singleInstance;
};
singleConstructor.prototype = Object.create(constructor.prototype);
return singleConstructor;
};
应用场景
单例模式不仅各种库、框架中十分常见，在日常开发过程使用的非常普遍，还可以帮助我们更优雅的组织代码、编写代码。
Vuex
在vuex中，就有单例的使用: 省略一些无关代码：
if (!Vue && typeof window !== 'undefined' && window.Vue) {
install(window.Vue)
}
function install (_Vue) {
if (Vue && _Vue === Vue) {
console.error('[vuex] already installed. Vue.use(Vuex) should be called only once.')
return
}
Vue = _Vue
}
Message组件
在UI组件库中，Message组件是非常常见的，而且都是支持同时多个展示，那么本次利用单例，将其进行修改为同时只能展示一个，下面的案例以Vue为例。
首先常见Message组件的内容。
main.vue文件内容：
<template>
<div v-show="visible">message组件</div>
</template>
<script type="text/babel">
export default {
data() {
return {
visible: false
};
},
methods: {
close() {
this.visible = false;
},
show() {
this.visible = true;
}
}
};
</script>
代码内容非常简单，只有一个变量visible和两个函数，控制组件的展示和隐藏
接下来看如何控制其展示。
main.js的内容:
import Vue from "vue";
import Main from "./main.vue";
let MessageConstructor = Vue.extend(Main);
class Message {
/**
* 展示 message组件
*/
show() {
this.instance.show()
}
/**
* 关闭 message组件
*/
close() {
this.instance.close()
}
/**
* 单例
*/
static getInstance() {
if(!this.instance) {
let instance = new MessageConstructor();
this.instance = instance;
instance.$mount();
document.body.appendChild(instance.$el);
}
return this.instance
}
}
Message.getInstance().show();
Message.getInstance().close();
无论调用show多少次，展示的都是同一个，因为通过单例模式，使用的都是同一个实例。
缓存
比如在业务开发过程中，将需要通过接口请求的数据或者一系列操作得到的数据进行缓存，这个数据具备持久性、不变性，否则缓存下来之后会导致出现问题，这个时候就可以利用单例模式将数据进行缓存。
本文内容不用于商业目的，如涉及知识产权问题，请权利人联系51Testing小编(021-64471599-8017)，我们将立即处理
