[[432921]]

本文轉(zhuǎn)載自微信公眾號(hào)「JS每日一題」，作者灰灰。轉(zhuǎn)載本文請(qǐng)聯(lián)系JS每日一題公眾號(hào)。

一、是什么

單例模式(Singleton Pattern)：創(chuàng)建型模式，提供了一種創(chuàng)建對(duì)象的最佳方式，這種模式涉及到一個(gè)單一的類，該類負(fù)責(zé)創(chuàng)建自己的對(duì)象，同時(shí)確保只有單個(gè)對(duì)象被創(chuàng)建

在應(yīng)用程序運(yùn)行期間，單例模式只會(huì)在全局作用域下創(chuàng)建一次實(shí)例對(duì)象，讓所有需要調(diào)用的地方都共享這一單例對(duì)象，如下圖所示：

從定義上來(lái)看，全局變量好像就是單例模式，但是一般情況我們不認(rèn)為全局變量是一個(gè)單例模式，原因是：

• 全局命名污染
• 不易維護(hù)，容易被重寫(xiě)覆蓋

二、實(shí)現(xiàn)

在javascript中，實(shí)現(xiàn)一個(gè)單例模式可以用一個(gè)變量來(lái)標(biāo)志當(dāng)前的類已經(jīng)創(chuàng)建過(guò)對(duì)象，如果下次獲取當(dāng)前類的實(shí)例時(shí)，直接返回之前創(chuàng)建的對(duì)象即可，如下：

// 定義一個(gè)類 
function Singleton(name) { 
    this.name = name; 
    this.instance = null; 
} 
// 原型擴(kuò)展類的一個(gè)方法getName() 
Singleton.prototype.getName = function() { 
    console.log(this.name) 
}; 
// 獲取類的實(shí)例 
Singleton.getInstance = function(name) { 
    if(!this.instance) { 
        this.instance = new Singleton(name); 
    } 
    return this.instance 
}; 
 
// 獲取對(duì)象1 
const a = Singleton.getInstance('a'); 
// 獲取對(duì)象2 
const b = Singleton.getInstance('b'); 
// 進(jìn)行比較 
console.log(a === b); 

使用閉包也能夠?qū)崿F(xiàn)，如下：

function Singleton(name) { 
    this.name = name; 
} 
// 原型擴(kuò)展類的一個(gè)方法getName() 
Singleton.prototype.getName = function() { 
    console.log(this.name) 
}; 
// 獲取類的實(shí)例 
Singleton.getInstance = (function() { 
    var instance = null; 
    return function(name) { 
        if(!this.instance) { 
            this.instance = new Singleton(name); 
        } 
        return this.instance 
    }         
})(); 
 
// 獲取對(duì)象1 
const a = Singleton.getInstance('a'); 
// 獲取對(duì)象2 
const b = Singleton.getInstance('b'); 
// 進(jìn)行比較 
console.log(a === b); 

也可以將上述的方法稍作修改，變成構(gòu)造函數(shù)的形式，如下：

// 單例構(gòu)造函數(shù) 
function CreateSingleton (name) { 
    this.name = name; 
    this.getName(); 
}; 
 
// 獲取實(shí)例的名字 
CreateSingleton.prototype.getName = function() { 
    console.log(this.name) 
}; 
// 單例對(duì)象 
const Singleton = (function(){ 
    var instance; 
    return function (name) { 
        if(!instance) { 
            instance = new CreateSingleton(name); 
        } 
        return instance; 
    } 
})(); 
 
// 創(chuàng)建實(shí)例對(duì)象1 
const a = new Singleton('a'); 
// 創(chuàng)建實(shí)例對(duì)象2 
const b = new Singleton('b'); 
 
console.log(a===b); // true 

三、使用場(chǎng)景

在前端中，很多情況都是用到單例模式，例如頁(yè)面存在一個(gè)模態(tài)框的時(shí)候，只有用戶點(diǎn)擊的時(shí)候才會(huì)創(chuàng)建，而不是加載完成之后再創(chuàng)建彈窗和隱藏，并且保證彈窗全局只有一個(gè)

可以先創(chuàng)建一個(gè)通常的獲取對(duì)象的方法，如下：

const getSingle = function( fn ){ 
  let result; 
  return function(){ 
    return result || ( result = fn .apply(this, arguments ) ); 
  } 
};  

創(chuàng)建彈窗的代碼如下：

const createLoginLayer = function(){ 
  var div = document.createElement( 'div' ); 
  div.innerHTML = '我是浮窗'; 
  div.style.display = 'none'; 
  document.body.appendChild( div ); 
  return div; 
};  
 
const createSingleLoginLayer = getSingle( createLoginLayer );  
 
document.getElementById( 'loginBtn' ).onclick = function(){ 
  var loginLayer = createSingleLoginLayer(); 
  loginLayer.style.display = 'block'; 
}; 

上述這種實(shí)現(xiàn)稱為惰性單例，意圖解決需要時(shí)才創(chuàng)建類實(shí)例對(duì)象

并且Vuex、redux全局態(tài)管理庫(kù)也應(yīng)用單例模式的思想，如下圖：

現(xiàn)在很多第三方庫(kù)都是單例模式，多次引用只會(huì)使用同一個(gè)對(duì)象，如jquery、lodash、moment...

參考文獻(xiàn)

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