JavaScript 单例模式详解：从基础实现到通用惰性单例
本文深入解析 JavaScript 中的单例模式，涵盖简单实现、透明实现、代理实现以及最常用的通用惰性单例。通过对比不同实现方式的优缺点，重点讲解如何利用闭包和高阶函数构建可复用的单例获取器，帮助开发者在避免资源浪费的同时保持代码的灵活性与可维护性。
一、认识单例模式
单例模式的核心目标是确保一个类仅存在一个实例，并提供一个全局访问点。其主要价值在于避免频繁创建对象，从而节省内存空间并减少资源消耗。在实际开发中，例如页面弹窗组件，无论用户点击多少次触发按钮，弹窗实例都应只被构建一次。这种场景非常适合采用单例模式来管理实例的创建与复用。
二、单例模式的分类
- 简单实现单例模式
- 透明实现单例模式
- 代理实现单例模式
- JS 原生单例模式
- 惰性单例模式
- 通用惰性单例模式（JS 常用）
注：前三种实现方式基于传统类的概念，通过 new 关键字创建实例。由于 JavaScript 本身没有类的概念，可以直接创建对象，因此前三种方式在 JS 中并不完全适用，主要应用于后三种实现思路中。
三、具体实现与思想解析
1. 简单实现单例模式
let Singleton = function ( name ) {
this.name = name;
}
Singleton.instance = null;
Singleton.prototype.getName = function () {
console.log( this.name )
}
Singleton.getInstance = function ( name ) {
if( !this.instance ) {
this.instance = new Singleton( name );
}
return this.instance;
}
let a = Singleton.getInstance('sk');
let b = Singleton.getInstance('ss');
console.log(a);
console.log(a === b) // true实现思路：将首次创建的实例保存下来，后续再次请求时先判断是否已存在实例。若已存在则直接返回保存的实例，否则创建新实例并将其实例化。该方法将实例创建与判断逻辑封装在 getInstance 函数中。虽然实现简单，但增加了类的“不透明性”，因为用户通过函数获取实例而非传统的 new 操作。
2. 透明单例模式
let CreateDiv = function () {
let instance ;
let CreateDiv = function ( html ) {
if( instance ) {
return instance;
}
this.html = html;
this.init();
return instance = this;
}
CreateDiv.prototype.init = function () {
let element = document.createElement('div');
element.innerHTML = this.html;
document.body.appendChild(element);
}
return CreateDiv;
}();
let a = new CreateDiv('石头山');
let b = new CreateDiv('哈哈');
console.log(a === b); // true 实现思路：与简单实现不同，此方式允许使用 new 关键字创建实例。它利用闭包保存实例标识，确保只能创建唯一实例。然而，如果未来需求变为创建多个 div 实例，该代码将不再适用，必须修改源码。因此，这种缺乏扩展性的方式引出了代理实现的方案。
3. 代理实现单例模式
let CreateDiv = function ( html ) {
this.html = html;
this.init();
}
CreateDiv.prototype.init = function () {
let div = document.createElement('div');
div.innerHTML = this.html;
document.body.appendChild(div);
}
let ProxySingletonCreateDiv = function () {
let instance ;
return function ( html ) {
if( !instance ) {
instance = new CreateDiv( html );
}
return instance;
}
}();
let a = new ProxySingletonCreateDiv('sven1');
let b = new ProxySingletonCreateDiv('sven2');
console.log(a === b); // true实现思路：CreateDiv 是一个普通类，而将创建唯一实例的逻辑封装在代理函数中。这种方式提高了代码复用性，弥补了透明单例的不足：需要单例时调用 new ProxySingletonCreateDiv()，需要普通实例时直接 new CreateDiv()。但该方式代码可读性较差，因此在实际开发中较少采用。
4. JS 中的单例模式
① 使用命名空间创建：将所有变量和方法直接挂载到一个全局对象中。
let S = {
name: '石头山',
getName() {
console.log(this.name);
}
}② 使用闭包封装私有变量：将变量封装在闭包内部，仅向全局暴露一个访问接口。
let name = "石头山";
return {
getName() {
return name;
}
}
}5. 通用惰性单例
// 写一个通用的获取单例的函数 , fn 为执行单次的函数
let getSingle = function ( fn ) {
let result;
return function () {
return result || ( result = fn.apply(this, arguments))
}
}
// 绑定事件
let bindEvent = function () {
document.getElementById('div').addEventListener('click',()=>{
console.log('我出现了')
});
}();
// 无论渲染多少次，事件只绑定一次
let render = function () {
console.log('开始渲染！');
getSingle(bindEvent)
}
render();
render();
render();这是 JavaScript 中常用的单例实现方法。例如在页面重复渲染三次时，监听事件只绑定了一次，从而减少了不必要的开销。
惰性体现：实例仅在真正需要时才被创建，而不是在页面加载完成时就预先创建。
实现思路：首先利用闭包和高阶函数封装一个返回单一实例的函数。该函数的参数是一个只执行一次的函数，可以随时改变单例的具体行为，从而大大提升了代码的可复用性。
四、总结
单例模式是一种简单但极其实用的开发模式。在 JavaScript 开发中，通用惰性单例是最常用的实现方式。它将创建对象和管理单例的职责分别封装在两个不同的方法中，两者结合即展现出单例模式的核心威力。
本文到此结束，希望能为读者提供帮助，也欢迎大家关注本站以获取更多技术内容！
JavaScript怎么准确判断数据类型：typeof、instanceof与Object.prototype.toString
2026-11-05 17:09:21
JS中将数组和对象混合组装为JSON字符串
2026-11-05 16:41:42
JS运算符优先级与结合性的区别是什么？
2026-11-05 13:22:02
JS Map怎么只遍历Key或Value
2026-11-05 13:00:36
D3.js 与 ECharts 选型对比：灵活性 vs 开发效率
2026-11-05 09:45:01