• 單例模式
  • 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:有說的不對的地方歡迎留言討論）