js常见的单例

前言

javascript在一些场景下会用到单例,当然这个其他平台所涉及的单例不一样,不需要考虑多线程加锁的问题,因此相对来说简单了一些

所以这篇文章就讲一下 javascript 中目前比较常用的单例实现方式

类构造方式

这种方式使用也是比较常见的,设置单例时可以支持使用new,也可以直接调用静态属性获取单例

js 复制代码
class Singleton {
    static #instance

    constructor() {
        if (Singleton.#instance) {
            return Singleton.#instance
        }
        Singleton.#instance = this
        this.name = "Singleton"
    }

    static get instance() {
        return new Singleton()
    }
}

const instance = Singleton.instance
const instance2 = new Singleton()
const instance3 = new Singleton()
console.log(instance === instance2, instance2 === instance3)

隐藏闭包构造方式

隐藏闭包也是早期就开始使用的一种方式,简单实用,使用隐藏闭包的方式返回一个对象,外部只能通过调用内部函数获取单例,也算是一种方式

js 复制代码
const Singleton = (function () {
    let singleton
    return {
        instance() {
            if (!singleton) {
                singleton = {} //这里创建对应的对象
            }
            return singleton
        }
    }
})()

const instance21 = Singleton.instance()
const instance22 = Singleton.instance()

console.log(instance21 === instance22)

es6模块方式导出方式

es6的模块的单例属性,直接导出一个单例对象,外部导出后可直接使用

js 复制代码
class Singleton {
}

export default new Singleton()


import singleton from './Singleton'
相关推荐
Ratten2 分钟前
【npm 解决】---- TypeError: crypto.hash is not a function
前端
前端小大白3 分钟前
JavaScript 循环三巨头:for vs forEach vs map 终极指南
前端·javascript·面试
晴空雨4 分钟前
面试题:如何判断一个对象是否为可迭代对象?
前端·javascript·面试
嘻嘻__5 分钟前
掘金沸点屏蔽脚本分享
前端·掘金社区
用户47949283569156 分钟前
🎨 Prettier 深度解析:从历史演进到内部格式化引擎的完整拆解
前端
Man6 分钟前
uniapp中使用unocss适配多端
前端·css
阿虎儿7 分钟前
React 事件类型完全指南:深入理解合成事件系统
前端·javascript·react.js
石小石Orz22 分钟前
面试官:qiankun如何实现Js与CSS隔离?
前端
Hilaku26 分钟前
前端需要掌握多少Node.js?
前端·javascript·node.js
成长ing1213826 分钟前
cocos creator塔防路线 运动路线的编辑和录制
前端·cocos creator