[javascript] Singleton 唯一實體

最近跟同事討論到了 Singleton 的實作,之前都沒有想過實際的細部實作

要創造一個物件,我們可以使用物件或 new 方法,以下我會分別介紹這兩種方法如何實作 Singleton。


物件:

var myInstance = {
    attr: '123',
    method1: function() {
        console.log('method1');
    },
    method2: function() {
        console.log('method2');
    }
};

var a = myInstance;
var b = myInstance;

a.attr = '456';

console.log(a === b);    // true
console.log(a.attr);     // '456'
console.log(b.attr);     // '456'
myInstance.attr = '789';
console.log(a.attr);     // '789'
console.log(b.attr);     // '789'

上面這段程式碼 a 和 b 將會是相同實體。

 

new 方法建造物件:

function myInstance(){

if(myInstance.instance){
return myInstance.instance;
}

this.attr = '123';

myInstance.instance = this;
};

var a = new myInstance();
var b = new myInstance();

console.log(a === b);    // true
console.log(a.attr);     // '123'
console.log(b.attr);     // '123'
a.attr = '456';
console.log(a.attr);     // '456'
console.log(b.attr);     // '456'

利用這個 myInstance 物件(函式)的靜態變數 (instance) 記住已經建造過的物件,讓之後建造時都回傳先前已存在之物件。

 

var myInstance;

function myInstance(){
 var instance = this;

 this.attr = '123';

 myInstance = function(){
 return instance;
 };
};

var a = new myInstance();
var b = new myInstance();

console.log(a === b);    // true
console.log(a.attr);     // '123'
console.log(b.attr);     // '123'
a.attr = '456';
console.log(a.attr);     // '456'
console.log(b.attr);     // '456'

這段程式碼則是另一種 new 方法的 Singleton 的實作方法,第一次進函式時,覆寫 myInstance 的 constructor,之後 new myInstance() 時,其實只會 return instance。

 

參考資料:

http://stackoverflow.com/questions/1479319/simplest-cleanest-way-to-implement-singleton-in-javascript

http://stackoverflow.com/questions/31222765/javascript-singleton-pattern

http://cythilya.blogspot.tw/2015/06/javascript-design-pattern-singleton.html

Leave a Reply