JS单例模式的多重魅力

摘要

JS单例模式有多种实现方案,ES5和ES6都有。备考策略模式时,发现这些方案非常有趣,分享给大家。共有6种方法,让我们一起探索吧!

正文

JS完成单例模式的多种多样计划方案

JS完成单例模式的多种多样计划方案 ,文中稍稍汇总,列举了6种方法与大伙儿共享,大致将內容分成了ES5(Function)与ES6(Class)完成二种一部分

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

关注不迷路

扫码下方二维码,关注宇凡盒子公众号,免费获取最新技术内幕!

温馨提示:如果您访问和下载本站资源,表示您已同意只将下载文件用于研究、学习而非其他用途。
文章版权声明 1、本网站名称:宇凡盒子
2、本站文章未经许可,禁止转载!
3、如果文章内容介绍中无特别注明,本网站压缩包解压需要密码统一是:yufanbox.com
4、本站仅供资源信息交流学习,不保证资源的可用及完整性,不提供安装使用及技术服务。点此了解
5、如果您发现本站分享的资源侵犯了您的权益,请及时通知我们,我们会在接到通知后及时处理!提交入口
0

评论0

请先

站点公告

🚀 【宇凡盒子】全网资源库转储中心

👉 注册即送VIP权限👈

👻 全站资源免费下载✅,欢迎注册!

记得 【收藏】+【关注】 谢谢!~~~

立即注册
没有账号?注册  忘记密码?

社交账号快速登录