JS实现单例模式的N种方案

更新时间：2022年09月13日 16:23:16 作者：粥里有勺糖

JS实现单例模式的多种方案，本文稍加总结，列出了6种方式与大家分享，大体上将内容分为了ES5（Function）与ES6（Class）实现两种部分，对js单例模式相关知识感兴趣的朋友跟随小编一起看看吧

JS实现单例模式的多种方案

今天在复习设计模式中的-创建型模式，发现JS实现单例模式的方案有很多种，稍加总结了一下，列出了如下的6种方式与大家分享

大体上将内容分为了ES5（Function）与ES6（Class）实现两种部分

单例模式的概念

一个实例只生产一次
保证一个类仅有一个实例，并提供一个访问它的全局访问点

方式1

利用instanceof判断是否使用new关键字调用函数进行对象的实例化

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

在函数上直接添加方法属性调用生成实例

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

使用闭包，改进方式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

使用包装对象结合闭包的形式实现

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

当然这里可以将闭包部分的代码单独封装为一个函数

在频繁使用到单例的情况下，推荐使用类似此方法的方案，当然内部实现可以采用上述任意一种

function SingleWrapper(cons) {
    // 排除非函数与箭头函数
    if (!(cons instanceof Function) || !cons.prototype) {
        throw new Error('不是合法的构造函数')
    }
    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

在构造函数中利用new.target判断是否使用new关键字

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静态方法

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);

到此这篇关于JS实现单例模式的N种方案的文章就介绍到这了,更多相关js单例模式内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

理解 javascript 中的函数表达式与函数声明
这篇文章主要介绍了理解 javascript 中的函数表达式与函数声明,需要的朋友可以参考下
2017-07-07
利用ES6实现单例模式及其应用详解
单例是在程序设计非常基础的东西，这篇文章主要给大家介绍了关于利用ES6实现单例模式及其应用的相关资料，文中通过示例代码介绍的非常详细，需要的朋友可以参考借鉴，下面随着小编来一起学习学习吧。
2017-12-12
微信小程序报错: thirdScriptError的错误问题
这篇文章主要介绍了微信小程序报错: thirdScriptError,本文给大家分享解决方法，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2020-06-06
JavaScript表单验证实例之验证表单项是否为空
表单验证几乎在每个需要注册或者是登录的网站都是必不可少，下面通过本篇文章给大家介绍JavaScript表单验证实例之验证表单项是否为空，涉及到js表单验证实例相关知识，对js表单验证实例代码需要的朋友一起学习吧
2016-01-01
JavaScript的Proxy可以做哪些有意思的事儿
这篇文章主要介绍了JavaScript的Proxy可以做哪些有意思的事儿,Proxy是ES6中提供的新的API，可以用来定义对象各种基本操作的自定义行为（在文档中被称为traps，我觉得可以理解为一个针对对象各种行为的钩子），,需要的朋友可以参考下
2019-06-06
trim原型函数看js正则表达式的性能
如果你看到别人写trim函数是用循环而不用正则表达式来写，请不要取笑，也许，他们就是高手。如果你很自信你的trim函数效率很高，请看完本文再下结论。
2008-12-12
js中比较两个对象是否相同的方法示例
这篇文章主要介绍了js中比较两个对象是否相同的方法,结合实例形式详细分析了js对象遍历、判断等相关操作技巧,需要的朋友可以参考下
2019-09-09
js在输入框屏蔽按键,只能键入数字的示例代码
本篇文章主要介绍了js在输入框屏蔽按键,只能键入数字的示例代码。需要的朋友可以过来参考下，希望对大家有所帮助
2014-01-01
fullCalendar日历插件玩法示例解析
这篇文章主要介绍了fullCalendar日历插件玩法示例解析,包括Fullcalendar安装,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2024-01-01
echarts X轴显示不全的处理方法(显示完全以及换行)
我们在echarts表中经常会出现X轴的信息显示不完全的情况,所以本文小编给大家介绍了echarts X轴显示不全的处理方法,文中通过代码示例给大家介绍的非常详细,具有一定的参考价值,需要的朋友可以参考下
2024-01-01