说说你对单例模式的理解？如何实现？

明月当头

 
一、是什么

单例模式（Singleton Pattern）：创建型模式，提供了一种创建对象的最佳方式，这种模式涉及到一个单一的类，该类负责创建自己的对象，同时确保只有单个对象被创建
在应用程序运行期间，单例模式只会在全局作用域下创建一次实例对象，让所有需要调用的地方都共享这一单例对象，如下图所示：

 
从定义上来看，全局变量好像就是单例模式，但是一般情况我们不认为全局变量是一个单例模式，原因是：

• 全局命名污染
  
• 不易维护，容易被重写覆盖
  

二、实现

在javascript中，实现一个单例模式可以用一个变量来标志当前的类已经创建过对象，如果下次获取当前类的实例时，直接返回之前创建的对象即可，如下：

1. // 定义一个类
2. function Singleton(name) {
3.     this.name = name;
4.     this.instance = null;
5. }
6. // 原型扩展类的一个方法getName()
7. Singleton.prototype.getName = function() {
8.     console.log(this.name)
9. };
10. // 获取类的实例
11. Singleton.getInstance = function(name) {
12.     if(!this.instance) {
13.         this.instance = new Singleton(name);
14.     }
15.     return this.instance
16. };
18. // 获取对象1
19. const a = Singleton.getInstance('a');
20. // 获取对象2
21. const b = Singleton.getInstance('b');
22. // 进行比较
23. console.log(a === b);

复制代码

使用闭包也能够实现，如下：

1. function Singleton(name) {
2.     this.name = name;
3. }
4. // 原型扩展类的一个方法getName()
5. Singleton.prototype.getName = function() {
6.     console.log(this.name)
7. };
8. // 获取类的实例
9. Singleton.getInstance = (function() {
10.     var instance = null;
11.     return function(name) {
12.         if(!this.instance) {
13.             this.instance = new Singleton(name);
14.         }
15.         return this.instance
16.     }        
17. })();
19. // 获取对象1
20. const a = Singleton.getInstance('a');
21. // 获取对象2
22. const b = Singleton.getInstance('b');
23. // 进行比较
24. console.log(a === b);

复制代码

也可以将上述的方法稍作修改，变成构造函数的形式，如下：

1. // 单例构造函数
2. function CreateSingleton (name) {
3.     this.name = name;
4.     this.getName();
5. };
7. // 获取实例的名字
8. CreateSingleton.prototype.getName = function() {
9.     console.log(this.name)
10. };
11. // 单例对象
12. const Singleton = (function(){
13.     var instance;
14.     return function (name) {
15.         if(!instance) {
16.             instance = new CreateSingleton(name);
17.         }
18.         return instance;
19.     }
20. })();
22. // 创建实例对象1
23. const a = new Singleton('a');
24. // 创建实例对象2
25. const b = new Singleton('b');
27. console.log(a===b); // true

复制代码

三、使用场景

在前端中，很多情况都是用到单例模式，例如页面存在一个模态框的时候，只有用户点击的时候才会创建，而不是加载完成之后再创建弹窗和隐藏，并且保证弹窗全局只有一个
可以先创建一个通常的获取对象的方法，如下：

1. const getSingle = function( fn ){
2.   let result;
3.   return function(){
4.     return result || ( result = fn .apply(this, arguments ) );
5.   }
6. };

复制代码

创建弹窗的代码如下：

1. const createLoginLayer = function(){
2.   var div = document.createElement( 'div' );
3.   div.innerHTML = '我是浮窗';
4.   div.style.display = 'none';
5.   document.body.appendChild( div );
6.   return div;
7. };
9. const createSingleLoginLayer = getSingle( createLoginLayer );
11. document.getElementById( 'loginBtn' ).onclick = function(){
12.   var loginLayer = createSingleLoginLayer();
13.   loginLayer.style.display = 'block';
14. };

复制代码

上述这种实现称为惰性单例，意图解决需要时才创建类实例对象
并且Vuex、redux全局态管理库也应用单例模式的思想，如下图：

 
现在很多第三方库都是单例模式，多次引用只会使用同一个对象，如jquery、lodash、moment...
参考文献

• https://zh.wikipedia.org/zh-hans/%E5%8D%95%E4%BE%8B%E6%A8%A1%E5%BC%8F
  
• https://www.runoob.com/design-pattern/singleton-pattern.html
  
• https://juejin.cn/post/6844903874210299912#heading-5
  

 
如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。

 

 

来源:https://www.cnblogs.com/smileZAZ/p/18225134
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！