📌 引言：深入理解单例模式 —— 从原理到实战
在软件工程中，设计模式（Design Pattern）是解决常见问题的标准解决方案。单例模式（Singleton Pattern）作为最常用的设计模式之一，广泛应用于各种开发场景中。
它的核心思想是：确保一个类在整个应用程序的生命周期中只被实例化一次，并提供一个统一的访问入口。这种模式常用于管理共享资源、控制访问、提升性能等场景。
本篇文章将带你从概念理解 → 实现原理 → 实际应用 → 常见问题，全面掌握单例模式，并通过多个代码示例和实际项目场景帮助你深入理解其原理与使用方式。
🧩 一、什么是单例模式？
✅ 定义
单例模式是一种创建型设计模式，它确保一个类在整个应用程序中只被实例化一次，并提供一个统一的访问入口。
换句话说，无论你调用多少次创建实例的方法，返回的始终是同一个对象。这个对象在整个应用程序中是唯一的。
🧱 核心特点
| 特性 | 说明 |
|---|---|
| 唯一性 | 整个程序中只能存在一个实例 |
| 全局访问 | 提供一个统一的方法来访问该实例 |
| 延迟初始化 | 实例在首次使用时才被创建，节省内存资源 |
| 线程安全（可选） | 多线程环境下确保单例的唯一性（在多线程语言中尤为重要） |
📌 典型应用场景
| 场景 | 说明 |
|---|---|
| 数据库连接池 | 避免频繁创建连接，提高性能 |
| 日志记录器 | 所有模块共用一个日志对象 |
| 全局配置管理 | 一次性加载配置信息 |
| 登录弹窗 | 只允许存在一个弹窗实例 |
| 主题管理器 | 全局统一管理主题样式 |
| 全局事件总线 | 统一管理事件订阅与发布 |
🛠 二、单例模式的实现方式（JavaScript）
JavaScript 是一门灵活的语言，支持多种方式实现单例模式。下面介绍两种最常见且实用的实现方式。
1️⃣ 基于 ES6 Class 的实现（推荐方式）
ES6 引入了 class 语法，使得我们能够以更清晰、面向对象的方式实现单例模式。
✅ 示例代码：
class Storage {
static instance;
static getInstance() {
if (!Storage.instance) {
Storage.instance = new Storage();
}
return Storage.instance;
}
getItem(key) {
return localStorage.getItem(key);
}
setItem(key, value) {
localStorage.setItem(key, value);
}
removeItem(key) {
localStorage.removeItem(key);
}
clear() {
localStorage.clear();
}
}
🔍 实现原理说明：
- 使用
static instance来保存唯一实例 - 通过
static getInstance()控制实例的创建逻辑 - 第一次调用时创建实例，后续调用返回已有实例
- 所有方法都通过实例调用，避免重复创建
✅ 使用方式：
const storage1 = Storage.getInstance();
const storage2 = Storage.getInstance();
console.log(storage1 === storage2); // true
🧠 底层机制解释：
- JavaScript 是单线程语言，类的静态属性在类加载时就已经初始化
static instance是类的静态属性，只在类作用域中存在，不随每次实例化而重复创建getInstance()方法通过判断是否已有实例来决定是否创建新对象，从而保证唯一性
2️⃣ 基于闭包 + 构造函数的实现（兼容性更好）
在不支持 ES6 的环境中，我们可以使用闭包机制实现单例模式。
✅ 示例代码：
function StorageBase() {}
StorageBase.prototype.getItem = function (key) {
return localStorage.getItem(key);
};
StorageBase.prototype.setItem = function (key, value) {
localStorage.setItem(key, value);
};
StorageBase.prototype.removeItem = function (key) {
localStorage.removeItem(key);
};
StorageBase.prototype.clear = function () {
localStorage.clear();
};
const Storage = (function () {
let instance = null;
return function () {
if (!instance) {
instance = new StorageBase();
}
return instance;
};
})();
🔍 实现原理说明：
- 利用函数的闭包特性，保存
instance变量 - 第一次调用时创建实例，后续调用返回已有实例
- 函数返回值控制实例的创建与返回
- 适用于不支持
class的旧浏览器环境
✅ 使用方式：
const storage1 = new Storage();
const storage2 = new Storage();
console.log(storage1 === storage2); // true
🧠 底层机制解释：
- 闭包是 JavaScript 中一种强大的特性，它允许函数访问并记住其定义时的词法作用域
- 在这个例子中，
instance是一个自由变量，它在 IIFE（立即执行函数）中被定义 - 外部函数返回一个函数，这个函数在调用时会访问
instance变量，从而实现单例逻辑 - 由于闭包的存在，
instance不会被垃圾回收机制回收，保持在内存中
🎨 三、单例模式的实际应用场景
场景1：本地存储封装（localStorage）
我们可以使用单例模式封装 localStorage，使得整个应用中对本地存储的操作都通过一个统一的接口进行。
✅ 示例代码：
const storage = Storage.getInstance();
storage.setItem('user', 'Tom');
console.log(storage.getItem('user')); // 输出 "Tom"
💡 优势：
- 统一访问入口，避免重复代码
- 提升代码可维护性和可测试性
- 更好地控制数据访问权限
🧠 深度解析：
localStorage是浏览器提供的持久化存储 API，但它是全局对象，容易被多个模块随意修改- 使用单例模式封装后，可以统一入口，添加日志、校验、错误处理等增强功能
- 同时也方便后期替换底层存储机制（如 IndexedDB、Cookie 等），只需修改单例实现
场景2：登录弹窗组件（Modal）
在 Web 应用中，登录弹窗通常只允许存在一个实例。我们可以通过单例模式实现这一需求。
✅ 示例代码：
<button id="open">打开弹窗</button>
<button id="close">关闭弹窗</button>
<div id="modal"></div>
<script>
const Modal = (function () {
let modal = null;
return function () {
if (!modal) {
modal = document.createElement('div');
modal.innerHTML = '我是一个全局唯一的Modal';
modal.id = 'modal';
modal.style.display = 'none';
document.body.appendChild(modal);
}
return modal;
};
})();
document.getElementById('open').addEventListener('click', function () {
const modal = Modal();
modal.style.display = 'block';
});
document.getElementById('close').addEventListener('click', function () {
const modal = Modal(); //在这里如果把这一行删掉，一样可以实现效果
modal.style.display = 'none';
});
</script>
💡 优势：
- 延迟加载：弹窗DOM只在首次打开时创建
- 内存优化：避免重复创建DOM节点
- 全局唯一：确保只有一个弹窗实例存在
❓ 四、常见问题与深入解析
Q1：为什么在 close 按钮的事件处理函数中可以直接使用 modal.style.display = 'none' 而不调用 Modal()？
🧱 我们一步一步从底层来解释这个现象：
1. 闭包的本质：函数 + 词法作用域
JavaScript 的函数可以访问它定义时所在的作用域中的变量，即使这个函数在别处执行。
你的 Modal 是一个 IIFE（立即执行函数）返回的函数，它形成了一个闭包，可以访问 IIFE 内部定义的 modal 变量。
const Modal = (function () {
let modal = null; // 这个变量被闭包捕获
return function () {
if (!modal) {
modal = document.createElement('div');
// ...
}
return modal;
};
})();
所以，这个 modal 变量存在于闭包中，不是全局变量，也不是函数内部变量，而是闭包变量。
2. 你第一次调用了 new Modal()，虽然用了 new，但闭包变量 modal 已经被赋值
即使你写了：
const modal = new Modal();
由于 Modal 不是一个构造函数，它返回的是 modal 这个 DOM 元素（而不是 this），所以 modal 变量会被赋值为那个 DOM 元素。
同时，闭包中的 modal 变量也被赋值了。
也就是说：
let modal = null;
return function () {
if (!modal) {
modal = document.createElement('div');
}
return modal;
};
这段代码中，modal 是闭包变量，它在第一次调用 Modal() 或 new Modal() 时就被赋值为 DOM 元素。
3. 你在 close 按钮的事件处理函数中直接使用 modal
document.getElementById('close').addEventListener('click', function () {
modal.style.display = 'none';
});
此时你没有调用 Modal()，也没有声明 const modal = Modal()，但你依然可以访问 modal，这是因为在 JavaScript 中：
这个
modal是闭包变量，它在函数定义时就已经被捕获并保存在内存中了。
换句话说：
modal是在Modal函数的闭包中定义的变量。- 它在第一次调用
Modal()或new Modal()时已经被赋值。 - 后续任何函数，只要它能访问到这个闭包变量，就可以直接使用它。
4. 为什么你能在 close 按钮事件处理函数中访问到闭包变量？
因为你在 Modal 函数中返回了一个函数，它是一个闭包函数，它能访问 modal 变量。
而你在其它地方（比如 close 按钮的事件处理函数）并没有重新声明 modal，那么 JavaScript 引擎会沿着作用域链向上查找，最终在闭包中找到 modal。
✅ 总结一句话：
你在
close按钮的事件处理函数中能访问到modal，是因为它是 闭包变量，是Modal函数内部定义的let modal，在第一次调用new Modal()或Modal()时被赋值并缓存，后续任何函数只要能访问到这个闭包，就能直接使用它。
Q2：如何避免全局变量污染？
✅ 答案：
使用闭包或类封装单例，可以避免将变量暴露到全局作用域中。
✅ 示例代码：
const Modal = (function () {
let modal = null; // 闭包变量，不会污染全局
return function () {
if (!modal) {
modal = document.createElement('div');
}
return modal;
};
})();
🔍 建议：
- 不要使用
var modal = Modal()，避免全局变量 - 尽量通过闭包或类封装数据
- 使用模块化开发（如ES6模块、CommonJS）进一步隔离作用域
🎯 五、总结
| 优势 | 说明 |
|---|---|
| 内存优化 | 避免重复创建对象 |
| 代码统一 | 提供统一的访问接口 |
| 延迟加载 | 实例在首次使用时创建 |
| 易于管理 | 所有操作集中在一个实例中 |
| 可维护性强 | 修改或扩展只需改单例实现 |
| 线程安全（在多线程语言中） | 确保单例在并发环境下的正确性 |
单例模式虽然简单，但在大型项目中能显著提升代码质量和性能。无论是封装本地存储、管理全局配置，还是构建可复用的UI组件，单例模式都能提供优雅而高效的解决方案。
📝 结语
希望这篇文章能帮助你更好地理解和掌握单例模式。无论你是前端开发者、全栈工程师，还是正在学习设计模式的初学者，单例模式都是你必须掌握的核心知识之一。
单例模式的本质是：控制对象的创建过程，保证其唯一性，提供统一访问入口。
通过本篇文章，你不仅掌握了单例的基本实现方式，还深入理解了其底层机制（如闭包、类静态属性、延迟加载、内存管理等）。这将为你在构建大型应用、优化性能、设计模块化系统时打下坚实的基础。
✅ 如果你觉得这篇文章对你有帮助，请点赞、收藏、转发，让更多人看到！
