核心思想是确保一个类只对应一个实例。
1. 利用闭包来
function Base() {}
Base.prototype.test = 1;
const single = (function () {
let instance = null;
return function () {
if (!instance) {
instance = new Base()
}
return instance
}})()
const a = single();
const b = single()
console.log(a === b)
a.test = 2;
console.log(b.test)
2. 利用es6 class的静态属性
class Base {
static getInstace() {
if (!Base.instance) {
Base.instance = new Base()
}
return Base.instance }
}
const a = Base.getInstace();
const b = Base.getInstace()
console.log(a === b)
a.test = 2;
console.log(b.test)
3. 实际应用 模态框 在构造函数中创建单例模式
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title></head><body> <button id='a'>opne</button> <button id='b'>close</button> <script> class Modol { constructor() { if (!Modol.instace) { Modol.instace = this } this.div = document.createElement('div'); this.div.innerHTML = '' document.querySelector('body').append(this.div) return Modol.instace; } open() { this.div.innerHTML = 'open' } close() { this.div.innerHTML = 'close' } } document.querySelector('#a').addEventListener('click', () => { const modol = new Modol(); modol.open() }) document.querySelector('#b').addEventListener('click', () => { const modol = new Modol(); modol.close() }) </script></body></html>