JS實(shí)現(xiàn)單例模式的6種方案匯總

更新時(shí)間：2021年05月19日 09:56:14 作者：粥里有勺糖

單例模式的定義是保證一個(gè)類僅有一個(gè)實(shí)例,下面這篇文章主要給大家介紹了關(guān)于JS實(shí)現(xiàn)單例模式的6種方案,需要的朋友可以參考下

前言

今天在復(fù)習(xí)設(shè)計(jì)模式中的-創(chuàng)建型模式，發(fā)現(xiàn)JS實(shí)現(xiàn)單例模式的方案有很多種，稍加總結(jié)了一下，列出了如下的6種方式與大家分享

大體上將內(nèi)容分為了ES5（Function）與ES6（Class）實(shí)現(xiàn)兩種部分

單例模式的概念

單例模式就是在系統(tǒng)中保存一個(gè)實(shí)例，就是一個(gè)全局變量，在團(tuán)隊(duì)開發(fā)中，為了實(shí)現(xiàn)一些相似的功能，比如不同頁面之間的表單驗(yàn)證，可能需求是不一樣的，但是呢命名可能一樣，這時(shí)就會(huì)產(chǎn)生沖突，這時(shí)候單例模式就能很好的解決這個(gè)問題。

一個(gè)實(shí)例只生產(chǎn)一次
保證一個(gè)類僅有一個(gè)實(shí)例，并提供一個(gè)訪問它的全局訪問點(diǎn)

說說它的優(yōu)點(diǎn)：

1，單例模式聲明一個(gè)命名空間，它生成一個(gè)唯一的全局變量，一個(gè)命名空間，可以用聲明對(duì)象的方式來聲明：

var mapleTao={ name:"mapleTao",init:function(){console.log(this.name)}};

有木有發(fā)現(xiàn)這個(gè)和對(duì)象有點(diǎn)類似呢，其實(shí)name，init是它的屬性，通過mapleTao.name就獲取它name的值，通過mapleTao.init()就可以調(diào)用init方法，這樣在哎處理多需求頁面，多人開發(fā)時(shí)就能很好的解決命名沖突的問題，以及可以更好的維護(hù)代碼，更好的控制代碼。

2，單例模式在全局中只聲明一個(gè)變量，大家都知道在js中，假設(shè)你寫了一個(gè)方法，如 function aa(){},這樣就會(huì)在window中生成一個(gè)叫aa的變量，當(dāng)實(shí)現(xiàn)一個(gè)功能時(shí)，在代碼封裝中，會(huì)創(chuàng)建好多函數(shù)，好多function，這樣就會(huì)在window中創(chuàng)建好多變量，會(huì)占用更多的內(nèi)存單元，全局變量的作用域很廣，在眾多處理函數(shù)中都可能改變，這樣當(dāng)出現(xiàn)bug時(shí)不容易快速找到，而通過單例模式創(chuàng)建的對(duì)象變量中可以更快速的找到問題，從而解決，這大大減少的問題修復(fù)的時(shí)間以及系統(tǒng)加載的時(shí)間。

3.在實(shí)現(xiàn)同一個(gè)功能的地方比通過new新創(chuàng)建對(duì)象對(duì)內(nèi)存對(duì)資源的占用更據(jù)優(yōu)勢(shì)。

方式1

利用instanceof判斷是否使用new關(guān)鍵字調(diào)用函數(shù)進(jìn)行對(duì)象的實(shí)例化

function User() {
    if (!(this instanceof User)) {
        return
    }
    if (!User._instance) {
        this.name = '無名'
        User._instance = this
    }
    return User._instance
}

const u1 = new User()
const u2 = new User()

console.log(u1===u2);// true

方式2

在函數(shù)上直接添加方法屬性調(diào)用生成實(shí)例

function User(){
    this.name = '無名'
}
User.getInstance = function(){
    if(!User._instance){
        User._instance = new User()
    }
    return User._instance
}

const u1 = User.getInstance()
const u2 = User.getInstance()

console.log(u1===u2);

方式3

使用閉包，改進(jìn)方式2

function User() {
    this.name = '無名'
}
User.getInstance = (function () {
    var instance
    return function () {
        if (!instance) {
            instance = new User()
        }
        return instance
    }
})()

const u1 = User.getInstance()
const u2 = User.getInstance()

console.log(u1 === u2);

方式4

使用包裝對(duì)象結(jié)合閉包的形式實(shí)現(xiàn)

const User = (function () {
    function _user() {
        this.name = 'xm'
    }
    return function () {
        if (!_user.instance) {
            _user.instance = new _user()
        }
        return _user.instance
    }
})()

const u1 = new User()
const u2 = new User()

console.log(u1 === u2); // true

當(dāng)然這里可以將閉包部分的代碼單獨(dú)封裝為一個(gè)函數(shù)

在頻繁使用到單例的情況下，推薦使用類似此方法的方案，當(dāng)然內(nèi)部實(shí)現(xiàn)可以采用上述任意一種

function SingleWrapper(cons) {
    // 排除非函數(shù)與箭頭函數(shù)
    if (!(cons instanceof Function) || !cons.prototype) {
        throw new Error('不是合法的構(gòu)造函數(shù)')
    }
    var instance
    return function () {
        if (!instance) {
            instance = new cons()
        }
        return instance
    }
}

function User(){
    this.name = 'xm'
}
const SingleUser = SingleWrapper(User)
const u1 = new SingleUser()
const u2 = new SingleUser()
console.log(u1 === u2);

方式5

在構(gòu)造函數(shù)中利用new.target判斷是否使用new關(guān)鍵字

class User{
    constructor(){
        if(new.target !== User){
            return
        }
        if(!User._instance){
            this.name = 'xm'
            User._instance = this
        }
        return User._instance
    }
}

const u1 = new User()
const u2 = new User()
console.log(u1 === u2);

方式6

使用static靜態(tài)方法

class User {
    constructor() {
        this.name = 'xm'
    }
    static getInstance() {
        if (!User._instance) {
            User._instance = new User()
        }
        return User._instance
    }
}


const u1 = User.getInstance()
const u2 = User.getInstance()

console.log(u1 === u2);