JavaScript 【设计模式】 之 单例模式

什么是单例模式？

即保证一个类仅有一个实例，并提供一个访问它的全局访问点。

一般情况下，我们通过类（本质是构造函数）形式创建对象后，实例之间都是相互独立的，各占一块内存空间；

class User {
    ...
}
const u1 = new User()
const u2 = new User()

u1 === u2   // false

而单例模式则是让我们不管创建多少次，都只返回首次创建的实例；

class  User {
  ...
  static getInstance(){
      if(!User.instance){
          User.instance = new User();
      }
      return User.instance;
  }
}

const u1 = User.getInstance()
const u2 = User.getInstance()

u1===u2  // true

应用场景

1. 全局状态管理
2. 弹窗
3. 命名空间
   等等...

优缺点

优点： 适用于单一对象，只生成一个对象实例，避免频繁创建和销毁实例，减少内存占用；

缺点： 不适用动态扩展对象，或需创建多个相似对象的场景

单例模式相关面试真题

1. 基于localStorage实现一个含setItem和getItem的单例；

class StorageBase {
  getItem(key){
    return localStorage.getItem(key)
  }
  setItem(key, val){
    localStorage.setItem(key, val);
  }
}

// 使用闭包形式实现
const Storage = (function(){
  let instance = null;
  return function(){
    if(!instance){
      instance = new StorageBase();
    }
    return instance
  }
}())

const store = new Storage();

store.setItem('key', 1);
store.getItem('key');   // 1

2. 弹窗组件（多次调用都只有一个弹窗对象，内部html不同）

const Modal = (function(){
  let modal = null;
  return function(html){
    if(!modal){
      modal = document.createElement('div');
      modal.id = 'modal';
      modal.innerHTML = html;
      modal.style.display = 'none';
      document.body.appendChild(modal);
    }
    return modal;
  }
}());

document.getElementById('open').addEventListener('click', ()=>{
  const modal = new Modal('modal的html');
  modal.style.display = 'block';
})