前端设计模式-单例模式
单例模式
1.确保只能有⼀个实例
2.可以全局访问
⽐如全局window,vuex 等都是单例模式的实现
const Singleton=function(name){
this.name = name
this.instance =null
}
// 在⽅法原型上添加getName()⽅法
Name=function(){
console.log(this.name)
}
// 如果实例不存在,则实例化⼀个
if(!this.instance){
this.instance =new Singleton(name)
}
return this.instance
}
// test
const a = Instance('a')// 通过 getInstance 来获取实例
const b = Instance('b')
console.log(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))
}
}
总结:1.需要使⽤return。使⽤new的时候如果没有⼿动设置return,那么默认会返回this。但是,我们这⾥要使得每次返回的实例相同,也就是需要⼿动控制创建的对象,因此这⾥需要使⽤return。
2.我们需要每次return的是同⼀个对象。也就是说实际上在第⼀次创建实例的时候,需要把这个实例保存起来。再new下⼀个实例的时候,直接return这个保存的实例即可。因此,这⾥需要⽤到闭包了。
// ⽤闭包的⽅式实现:
let instanceClass=function(){}
// 匿名⾃执⾏函数
let Instance =(function(){
// 声明⼀个instance对象
let instance // 声明⼀个instance对象
return function(){
if(instance){// 如果已存在则返回instance
return instance
}
instance =new instanceClass()// 如果不存在则new⼀个instanceClass实例对象return instance // 始终返回这个instance
单例模式的几种实现方式}
})()
let a =new Instance()
let b =new Instance()
console.log(a===b)// true
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论