快捷導(dǎo)航

JavaScript實(shí)現(xiàn)單例模式的六種方式

更新時(shí)間：2025年12月10日 08:41:28 作者：willxiao

單例模式確保一個(gè)類只有一個(gè)實(shí)例,并提供全局訪問點(diǎn),文章介紹了JavaScript中實(shí)現(xiàn)單例模式的幾種常見方式,包括對(duì)象字面量、閉包實(shí)現(xiàn)、ES6類實(shí)現(xiàn)、改進(jìn)的class實(shí)現(xiàn)、ES6模塊模式的單例以及ES6模塊本身就是單例,每種方式都有其特點(diǎn)和適用場景,需要的朋友可以參考下

1.對(duì)象字面量（最簡單的方式）

const Singleton = {
  property: 'value',
  method() {
    // 使用 this（在方法被解構(gòu)調(diào)用時(shí)會(huì)丟失上下文）
    // console.log(this.property);
    
    // 使用 Singleton（更安全）
    console.log(Singleton.property);
  }
};

// 使用
Singleton.method();

JavaScript 可以使用對(duì)象字面量快速創(chuàng)建一個(gè)對(duì)象，創(chuàng)建的對(duì)象本身就是單例。這種方式最為簡單，但是需要注意 this 的引用可能出問題。

為了解決 this 的問題，可以直接引用單例對(duì)象本身。

2.閉包實(shí)現(xiàn)

const Singleton = (function() {
  let instance;
  
  function createInstance() {
    const object = new Object('I am the instance');
    return object;
  }
  
  return {
    getInstance: function() {
      if (!instance) {
        instance = createInstance();
      }
      return instance;
    }
  };
})();

// 使用
const instance1 = Singleton.getInstance();

這里利用了閉包的特性實(shí)現(xiàn)了模塊的封裝和單例對(duì)象的引用，返回一個(gè) getInstance 方法用于獲取實(shí)例對(duì)象。

3.ES6 Class 實(shí)現(xiàn)

class Singleton {
  constructor() {
    if (Singleton.instance) {
      return Singleton.instance;
    }
    
    this.data = 'Singleton Data';
    Singleton.instance = this;
  }
  
  getData() {
    return this.data;
  }
  
  setData(data) {
    this.data = data;
  }
}

// 使用
const s1 = new Singleton();
const s2 = new Singleton();
console.log(s1 === s2); // true
s1.setData('New Data');
console.log(s2.getData()); // 'New Data'

這里的 instance 是一個(gè)靜態(tài)變量，這種方式在 constructor 的最后將 this 賦值給 instance。

4.改進(jìn)的 class 實(shí)現(xiàn)（typescript 版本）

class Singleton {
  private static instance?: Singleton;

  private constructor() {}

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

// 使用
const s1 = Singleton.getInstance();
const s2 = Singleton.getInstance();
console.log(s1 === s2); // true

typescript 版本抽取 getInstance 方法，讓代碼更可讀。使用 private 關(guān)鍵字實(shí)現(xiàn)私有屬性和方法，保證代碼不會(huì)被隨意篡改。

5.ES6 模塊模式的單例

// 在模塊文件中
let instance = null;

class Database {
  constructor(config) {
    if (instance) {
      return instance;
    }
    
    this.connection = this.connect(config);
    instance = this;
  }
  
  connect(config) {
    return { connected: true, config };
  }
}

// 導(dǎo)出一個(gè)獲取實(shí)例的函數(shù)
export const getInstance= (() => {
  let instance = null;
  return (config) => {
    if (!instance) {
      instance = new Database(config);
    }
    return instance;
  };
})();

這種方式利用 ES6 模塊變量的引用共享特性，保證 instance 唯一。導(dǎo)出一個(gè) getInstance 方法。

6.ES6 模塊本身就是單例

class Database {
  constructor(config) {
    this.connection = this.connect(config);
  }
  
  connect(config) {
    return { connected: true, config };
  }
}

// 直接導(dǎo)出一個(gè)實(shí)例
export default new Database({ host: 'localhost' });

實(shí)測證明，導(dǎo)出的實(shí)例在多個(gè)模塊間是共享的。