javascript 單例模式詳解及簡單實(shí)例
JS 單例模式
概要:
單例指一個類只有一個實(shí)例,這個類自行創(chuàng)建這個實(shí)例。
利用對象字面量直接生成一個單例:
var singleton = {
prop: 1,
method: function(){
console.log(a); //1
}
}
嚴(yán)格的說對象字面量可能不算單例模式,生成單例是對象字面量的作用(已經(jīng)被封裝),而單例模式是一個設(shè)計(jì)模式(需要自行構(gòu)思或設(shè)計(jì))。
在類內(nèi)部用new生成實(shí)例的單例模式:
var instance;
var foo = function(){
if(!instance){
instance = new Singleton();
}
return instance;
function Singleton(){
this.name = 'single';
this.method = function(){
console.log(this.name);
}
};
}
var a = foo();
var b = foo();
a.method(); //single
console.log(a === b); //true
單例模式只要檢測一個實(shí)例是否被生成。假如沒有實(shí)例,則生成實(shí)例。假如已經(jīng)生成則返回這個實(shí)例。保證這個類只有這一個實(shí)例。
由于hoisting,函數(shù)會提前聲明,所以 singleton 函數(shù)放在哪都沒所謂,但是每次調(diào)用都會聲明函數(shù)singleton,可能會不夠優(yōu)雅。
由于new關(guān)鍵字是執(zhí)行函數(shù),同時this指向這個對象,所以可以判斷類的this是否賦值給instance:
var instance;
var Singleton = function(){
if(instance){
return instance;
}
instance = this;
this.name = 'single';
this.method = function(){
console.log(this.name);
}
}
var a = new Singleton();
var b = new Singleton();
a.method(); //single
console.log(a === b); //true
這個例子中,把instance指向了Singleton這個類,然后在類外部通過new來實(shí)例化,和上例中的new異曲同工。由于是通過修改this來達(dá)到檢測是否執(zhí)行過Singleton類,所以個人感覺不夠語義化。
上面的例子用es6重構(gòu)的寫法。
類內(nèi)部new生成單例:
var instance;
class foo{
static Singleton(){
if(!instance){
instance = new foo();
}
return instance;
}
method(){
this.name = 'single';
console.log(this.name);
}
}
var a = foo.Singleton();
var b = foo.Singleton();
a.method(); //single
console.log(a === b); //true
修改this指向生成單例:
var instance;
class foo{
constructor(){
if(!instance){
this.Singleton();
}
return instance;
}
Singleton(){
instance = this;
this.name = 'single';
this.method = function(){
console.log(this.name);
}
}
}
var a = new foo();
var b = new foo();
a.method(); //single
console.log(a === b); //true
當(dāng)然除了這兩種以外還有別的方式能實(shí)例化一個單例。
感謝閱讀,希望能幫助到大家,謝謝大家對本站的支持!
- JavaScript設(shè)計(jì)模式---單例模式詳解【四種基本形式】
- JS 設(shè)計(jì)模式之:單例模式定義與實(shí)現(xiàn)方法淺析
- javascript設(shè)計(jì)模式 – 單例模式原理與應(yīng)用實(shí)例分析
- 原生javascript單例模式的應(yīng)用實(shí)例分析
- 基于JavaScript實(shí)現(xiàn)單例模式
- js設(shè)計(jì)模式之單例模式原理與用法詳解
- JavaScript設(shè)計(jì)模式之單例模式原理與用法實(shí)例分析
- JavaScript設(shè)計(jì)模式之單例模式簡單實(shí)例教程
- JavaScript實(shí)現(xiàn)單例模式實(shí)例分享
- NodeJS設(shè)計(jì)模式總結(jié)【單例模式,適配器模式,裝飾模式,觀察者模式】
- JavaScript設(shè)計(jì)模式之單例模式詳解
- 解析Javascript單例模式概念與實(shí)例
- 怎樣用Javascript實(shí)現(xiàn)單例模式
相關(guān)文章
js+css實(shí)現(xiàn)三級導(dǎo)航菜單
這篇文章主要為大家詳細(xì)介紹了js+css實(shí)現(xiàn)三級導(dǎo)航菜單,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2021-08-08
Bootstrap響應(yīng)式側(cè)邊欄改進(jìn)版
這篇文章主要為大家詳細(xì)介紹了Bootstrap響應(yīng)式側(cè)邊欄改進(jìn)版,結(jié)合導(dǎo)航條和下拉菜單進(jìn)行改進(jìn),具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-09-09
利用JavaScript實(shí)現(xiàn)繪制2023新年煙花的示例代碼
大家過年好!新春佳節(jié),在這個充滿喜悅的日子里,愿新年的鐘聲帶給你一份希望和期待。在這喜慶的日子里,小編和大家分享一個煙花代碼,希望大家能夠喜歡2023-01-01
js實(shí)現(xiàn)仿百度風(fēng)云榜可重復(fù)多次調(diào)用的TAB切換選項(xiàng)卡效果
這篇文章主要介紹了js實(shí)現(xiàn)仿百度風(fēng)云榜可重復(fù)多次調(diào)用的TAB切換選項(xiàng)卡效果,涉及javascript鼠標(biāo)事件及頁面元素遍歷調(diào)用的實(shí)現(xiàn)技巧,非常簡單實(shí)用,需要的朋友可以參考下2015-08-08

