JS单例模式 JS实现单例模式的6种方案汇总

软件发布|下载排行|最新软件

当前位置:首页IT学院IT技术

JS单例模式 JS实现单例模式的6种方案汇总

粥里有勺糖   2021-05-19 我要评论
想了解JS实现单例模式的6种方案汇总的相关内容吗,粥里有勺糖在本文为您仔细讲解JS单例模式的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:js单例模式,js手写单例模式,js单例模式实现,下面大家一起来学习吧。

前言

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

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

单例模式的概念

单例模式就是在系统中保存一个实例,就是一个全局变量,在团队开发中,为了实现一些相似的功能,比如不同页面之间的表单验证,可能需求是不一样的,但是呢命名可能一样,这时就会产生冲突,这时候单例模式就能很好的解决这个问题。

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

说说它的优点:

1,单例模式声明一个命名空间,它生成一个唯一的全局变量,一个命名空间,可以用声明对象的方式来声明:

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

有木有发现这个和对象有点类似呢,其实name,init是它的属性,通过mapleTao.name就获取它name的值,通过mapleTao.init()就可以调用init方法,这样在哎处理多需求页面,多人开发时就能很好的解决命名冲突的问题,以及可以更好的维护代码,更好的控制代码。

2,单例模式在全局中只声明一个变量,大家都知道在js中,假设你写了一个方法,如 function aa(){},这样就会在window中生成一个叫aa的变量,当实现一个功能时,在代码封装中,会创建好多函数,好多function,这样就会在window中创建好多变量,会占用更多的内存单元,全局变量的作用域很广,在众多处理函数中都可能改变,这样当出现bug时不容易快速找到,而通过单例模式创建的对象变量中可以更快速的找到问题,从而解决,这大大减少的问题修复的时间以及系统加载的时间。

3.在实现同一个功能的地方比通过new新创建对象对内存对资源的占用更据优势。

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

总结

Copyright 2022 版权所有 软件发布 访问手机版

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 联系我们