单例模式：JavaScript世界里的「独生子女政策」

大家好，我是前端老司机，今天要聊的是设计模式里的「独生子女政策」------单例模式。这可不是什么编程玄学，而是让代码更高效、更优雅的实用技巧。

单例模式是个啥？

简单来说，单例模式就是：一个类被new多次，得到的实例对象居然是同一个！ 就像世界上只有一个你，不管怎么呼唤，站在你面前的永远是同一个人。

在前端开发中，这玩意儿可太有用了。比如全局状态管理、弹窗组件、WebSocket连接池...这些场景都需要确保对象的唯一性。

JavaScript实现单例模式的两种姿势

姿势一：静态方法版

javascript:d:\shensuo_-ai_fullstack\设计模式\单例模式\3.js 复制代码

class SingleDog {
  show() {
    console.log('我是一个单身狗')
  }
  static getInstance() {
    if (!SingleDog.instance) {
      SingleDog.instance = new SingleDog()
    }
    return SingleDog.instance
  }
}

const s1 = SingleDog.getInstance()
const s2 = SingleDog.getInstance()

console.log(s1 === s2) // true

这就像去领结婚证，第一次去登记处会给你办一本（创建实例），以后再去就直接把那本给你（返回已有实例），保证你永远只有一本合法证书。

姿势二：闭包版

javascript:d:\shensuo_-ai_fullstack\设计模式\单例模式\4.js 复制代码

class SingleDog {
  show() {
    console.log('我是一个单身狗')
  }
}
SingleDog.getInstance = (function() {
  let instance = null
  return function() {
    if (!instance) {
      instance = new SingleDog()
    }
    return instance
  }
})()

const s1 = SingleDog.getInstance()
const s2 = SingleDog.getInstance()

console.log(s1 === s2) // true

这种方式用了JavaScript的「闭包魔法」，把实例对象藏在一个私密空间里，外界无法直接访问，只能通过getInstance方法来获取。就像你把私房钱藏在只有自己知道的地方，别人拿不走也看不到。

从构造函数到ES6 Class

说到类，咱们得先区分一下JavaScript中类的两种写法。在ES6之前，我们用构造函数模拟类：

javascript:d:\shensuo_-ai_fullstack\设计模式\单例模式\1.js 复制代码

function Point(x, y) {
  this.x = x
  this.y = y
}
Point.prototype.toString = function() {
  return `(${this.x}, ${this.y})`
}

而ES6之后，我们有了更优雅的class语法：

javascript:d:\shensuo_-ai_fullstack\设计模式\单例模式\2.js 复制代码

class Point {
  constructor(x, y) {
    this.x = x
    this.y = y
  }
  toString() {
    return `(${this.x}, ${this.y})`
  }
}

就像从手写情书到用微信发消息，本质没变，但体验好多了！

单例模式的「超能力」

节约资源：只创建一个实例，避免重复创建对象带来的性能开销
全局访问：通过统一入口访问对象，避免全局变量污染
状态共享：所有地方使用的都是同一个实例，状态天然同步

比如在Vue项目中，我们常常用单例模式来管理全局状态或API请求实例，确保整个应用使用的是同一套配置和状态。

写在最后

单例模式就像编程世界里的「独生子女政策」，不是所有场景都适用，但在需要对象唯一性的场景下，它绝对是你的「最佳拍档」。

下次写代码时，如果遇到需要确保对象唯一性的场景，不妨试试单例模式，让你的代码更高效、更优雅！

你在项目中用过单例模式吗？欢迎在评论区分享你的使用经验～