js单例模式的es5实现和es6实现,以及通用惰性单例实现

本文介绍了JavaScript中的单例模式,包括ES5和ES6两种实现方式,以及通用的惰性单例模式,强调了惰性单例的特点在于首次使用时才创建实例,并给出了具体的代码示例,如在登录场景中,确保登录框始终只有一个实例。

单例模式

一开始不创建实例对象,当第一次使用时才创建
用一个变量标志当前是否已经为某个类创建过对象,如果已创建则在下次获取时返回之前创建的实例对象

es5实现

function Singleton(name){//对象构造方法
  this.name=name;
  this.instance;
}
Singleton.prototype.getName=()=>{//对象原型方法
  console.log(this.name);
}
Singleton.getInstance=(name)=>{//对象静态方法
  //如果有实例则返回,没有则创建并返回   
  return this.instance || (this.instance=new Singleton(name))
}

let a=Singleton.getInstance('aa')
let b=Singleton.getInstance('bb')
console.log(a,b,a===b);
//Singleton { name: 'aa' } Singleton { name: 'aa' } true
//a===b说明只第一次访问的时候创建了实例,后面每次调用会获取第一次创建的同一个实例

es6实现

class Singleton{//类声明
  constructor(name){//类构造器
    this.name=name;
    this.instance;
  }
  getName(){//原型方法
    console.log(this.name);
  }
  static getInstance(name){//静态方法
    //如果有实例则返回,没有则创建并返回 
    return this.instance || (this.instance=new Singleton(name))
  }
}

let c=Singleton.getInstance('cc')
let d=Singleton.getInstance('dd')
console.log(c,d,c===d);
//Singleton { name: 'aa' } Singleton { name: 'aa' } true

惰性单例

一开始不创建实例对象,当第一次使用的时候才创建

通用惰性单例实例

当第一次点击登录按钮时才渲染登录框,无论点击多少次,都弹出同一个登录框

let getSingle=function(fn){
  let result
  return function(){
    //如果有实例则返回,没有则创建并返回
    return result || (result=fn.apply(this,arguments))
  }
}
//单一责任原则,将创建实例和创建DOM的操作解耦
let createLoginLayer=function(){
  let div=document.createElement('div')
  div.innerHTML="我是登录框"
  div.style.display="none"
  document.body.appendChild(div)
  return div
}
//第一次点击登录的时候才渲染登录框,多次点击登录都返回同一个登录框,不再重新插入DOM
document.getElementById('btnLogin').onclick=function(){
  let loginLayer=getSingle(createLoginLayer)
  loginLayer.style.display="block"
}
//点击关闭的时候设置登录框不可见,下次点击登录的时候就不需要重新生成插入DOM,只需要设置登录框可见
document.getElementById('btnClose').onclick=function(){
  let loginLayer=getSingle(createLoginLayer)
  loginLayer.style.display="none"
}

(ps:有说的不对的地方欢迎留言讨论)

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值