定義:保證一個類僅有一個實例，并提供一個訪問它的全局訪問點。
單例模式是一種常用的模式，有些對象往往只需要一個，比如：線程池、全局緩存、瀏覽器中的 window 對象等。在 Javascript 開發中，單例模式的用途同樣非常廣泛，比如做登錄彈框，它在當前頁面是唯一的，無論單擊多少次，都只會創建一次，這就非常適合用單例模式來創建。
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
}
let p1 = new Person();
let p2 = new Person();
console.log(p1 === p2);//fasle
1.簡單實現:
class Person {
constructor(name, age) {
console.log('person created');
}
}
//創建Person的工作提前了入
const person = new Person();
export { person }
缺點:創建實例提前了,通用性差
2.優化上面的方法
class Person {
constructor(name, age) {
console.log('person created');
}
//靜態是屬性
static ins = null;
static getInstance(args) {
if (!this.ins) {
this.ins = new Person(...args);
}
return this.ins;
}
}
export { Person }
使用:
import { Person } from "./Person.js";
let p1 = Person.getInstance("張三", 18);
let p2 = Person.getInstance("李四", 19);
let p3 = new Person("李四", 19);
console.log(p1 === p2);//true
console.log(p1 === p3);//false
缺點:由于js沒有private關鍵字,無法將構造函數私有化,這也就需要使用者知道調用getInstance方法創建實例,而不是通過new的方式創建實例
再次優化:
singleton.js
export function singleton(className) {
let ins;
return class {
constructor(...args) {
if (!ins) {
ins = new className(...args);
}
return ins;
}
}
}
person.js
import { singleton } from "./singleton.js";
class Person {
constructor(name, age) {
console.log('person created');
}
}
const newPerson = singleton(Person);
export { newPerson as Person }
使用:
import { Person } from "./Person.js";
let p1 = new Person("張三", 18);
let p2 = new Person("張三", 18);
//這里的new 相當于 new 的singleton里return的class
console.log(p1 === p2);
缺點:
import { Person } from "./Person.js";
let p1 = new Person("張三", 18);
let p2 = new Person("張三", 18);
Person.prototype.play = function () {
console.log("加在原型上的方法--play");
}
p1.play();//報錯TypeError: p1.play is not a function
console.log(p1 === p2);
上面Person指向的是 singleton中return 的class
而p1,p2是Person的實例,所以p1,p2無法使用掛載在singleton中return 的class原型上的方法.
使用代理來實現單例:
export function singleton(className) {
let ins;
//使用代理來攔截construct
return new Proxy(className, {
construct(target, args) {
if (!ins) {
ins = new target(...args);
}
return ins;
}
})
}
代理實現單例.png
