JS单例模式详解|极客笔记

JS单例模式详解

单例模式是一种常用的设计模式，用于限制只能创建一个实例。在JavaScript中，单例模式可以通过对象字面量或者立即调用函数表达式（IIFE）来实现。通过单例模式，可以确保一个类只有一个实例，并且提供一个全局访问点。

对象字面量实现单例模式

对象字面量是JavaScript中创建对象的一种方式，可以方便地创建一个单例对象。在对象字面量中直接定义属性和方法，即可实现一个单例对象。

const singleton = {
  prop1: 'value1',
  prop2: 'value2',
  method1() {
    console.log('Method 1');
  }
};

上述代码中，singleton对象就是一个单例对象，通过对象字面量定义了两个属性prop1和prop2，以及一个方法method1。

IIFE实现单例模式

除了对象字面量外，还可以使用立即调用函数表达式（IIFE）来实现单例模式。在IIFE中创建一个闭包，闭包中定义了一个变量用于存储实例，同时返回一个对象字面量作为公共接口，用于访问实例属性和方法。

const Singleton = (function() {
  let instance;

  function init() {
    return {
      prop1: 'value1',
      prop2: 'value2',
      method1() {
        console.log('Method 1');
      }
    };
  }

  return {
    getInstance() {
      if (!instance) {
        instance = init();
      }
      return instance;
    }
  };
})();

const instance1 = Singleton.getInstance();
const instance2 = Singleton.getInstance();

console.log(instance1 === instance2); // 输出true

在上述代码中，Singleton是一个立即调用函数表达式，返回了一个包含getInstance方法的对象。getInstance方法用于获取单例对象的实例，如果实例不存在则创建一个实例。通过调用getInstance方法可以获取到单例对象的唯一实例。

惰性单例

惰性单例是指在需要时才创建实例而不是在一开始就创建实例。可以通过修改getInstance方法实现惰性单例。

const Singleton = (function() {
  let instance;

  function init() {
    return {
      prop1: 'value1',
      prop2: 'value2',
      method1() {
        console.log('Method 1');
      }
    };
  }

  return {
    getInstance() {
      if (!instance) {
        instance = init();
      }
      return instance;
    }
  };
})();

const btn = document.getElementById('btn');
btn.addEventListener('click', function() {
  const instance = Singleton.getInstance();
  console.log(instance);
});

在上述代码中，当点击按钮时才会创建单例对象的实例，而不是在页面加载时就创建实例。这样可以节省资源，提高性能。