一、是什么

单例模式，即创建型模式，提供了一种创建对象的最佳方式，这种模式涉及到一个单一的类，该类负责创建自己的对象，确保只有单个对象被创建。
在应用程序运行期间，单例模式只会在全局作用域下创建一次实例对象，让所有需要调用的地方都共享这一单例对象：
单例模式 - 图1
从定义上来看，全局变量就好像是单例模式，但是一般情况下我们不认为全局变量是一个单例模式，原因是：

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

    二、实现

    在JavaScript中，实现一个单例模式可以用一个变量来标志当前的类已经创建过对象，如果下次获取当前类的实例时，直接返回之前创建的对象即可，如下： ```javascript // 定义一个类 function Singleton(name) { this.name = name; this.instance = null; } // 原型扩展类的一个方法getName() Singleton.prototype.getName = function() { console.log(this.name) }; // 获取类的实例 Singleton.getInstance = function(name) { if(!this.instance) {
    1.   this.instance = new Singleton(name);
    } return this.instance };

// 获取对象1 const a = Singleton.getInstance(‘a’); // 获取对象2 const b = Singleton.getInstance(‘b’); // 进行比较 console.log(a === b);

  1. 使用闭包也能够实现，如下：
  2. ```javascript
  3. function Singleton(name) {
  4.     this.name = name;
  5. }
  6. // 原型扩展类的一个方法getName()
  7. Singleton.prototype.getName = function() {
  8.     console.log(this.name)
  9. };
  10. // 获取类的实例
  11. Singleton.getInstance = (function() {
  12.     var instance = null;
  13.     return function(name) {
  14.         if(!this.instance) {
  15.             this.instance = new Singleton(name);
  16.         }
  17.         return this.instance
  18.     }        
  19. })();
  21. // 获取对象1
  22. const a = Singleton.getInstance('a');
  23. // 获取对象2
  24. const b = Singleton.getInstance('b');
  25. // 进行比较
  26. 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全局状态管理库也应用单例模式的思想，如下图：
image.png
如今很多第三方库都是单例模式，多次引用只会使用同一个对象，如jquery/lodash/moment…