当前位置:首页 > 文章列表 > 文章 > 前端 > JavaScript单例模式怎么实现?你用过吗

JavaScript单例模式怎么实现?你用过吗

2026-04-06 13:17:13 0浏览 收藏
JavaScript中的单例模式并非语言原生支持,而是依赖开发者通过闭包+IIFE或ES6 class+静态属性等手段主动控制实例唯一性,核心在于确保全局仅有一个可复用的实例;但实践中需警惕滥用——它不等于全局状态容器,不当使用易导致耦合、测试困难、跨环境污染(如SSR或微前端),真正关键的不是实现技巧,而是厘清“为何必须唯一”:明确生命周期、共享边界与销毁时机,否则再“规范”的单例反而成为调试噩梦。

JavaScript中如何实现单例模式_设计模式你用过吗

单例模式在 JavaScript 中不是靠语言机制强制实现的,而是靠开发者主动控制实例创建逻辑——只要确保全局只存在一个实例,并能重复获取它,就算达成目标。

用闭包 + 模块模式封装私有实例

这是最常用、也最符合 JS 特性的写法。利用立即执行函数(IIFE)和闭包变量,把实例“藏”在作用域里,外部无法篡改。

  • instance 变量不会暴露到全局,避免被意外覆盖
  • 构造函数可以带参数,但首次调用后参数不再生效(除非你主动重置)
  • 适合需要延迟初始化、或依赖异步准备工作的场景
const Singleton = (function() {
  let instance = null;

  function createInstance() {
    return {
      data: Math.random(),
      log() { console.log('Singleton:', this.data); }
    };
  }

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

// 使用
const a = Singleton.getInstance();
const b = Singleton.getInstance();
console.log(a === b); // true

用 ES6 class + 静态属性实现

更接近传统 OOP 写法,语义清晰,但要注意 instance 是静态属性,仍需手动检查是否已存在。

  • 不能直接 new 类来绕过单例逻辑——必须通过 getInstance()
  • 如果类有继承需求,需额外处理子类的 instance 独立性
  • 若构造函数抛错,instance 可能为 null 或未定义,建议加 try/catch
class Logger {
  constructor() {
    if (Logger.instance) {
      return Logger.instance;
    }
    this.id = Date.now();
    Logger.instance = this;
  }

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

  log(msg) {
    console.log(`[${this.id}] ${msg}`);
  }
}

// 使用
const l1 = Logger.getInstance();
const l2 = Logger.getInstance();
console.log(l1 === l2); // true

注意:new 操作符和构造函数陷阱

JS 的 new 本身不阻止多次实例化。如果你允许用户直接 new Singleton(),那单例就失效了。

  • 不要只靠 if (instance) return instance 放在构造函数里——new 会忽略 return 的非对象值
  • 若返回原始值(如 return 42),new 仍返回新对象;只有返回对象才可能拦截
  • 真正安全的做法是:禁止直接 new,只暴露工厂方法(如 getInstance),或用 Symbol 私有标识做运行时校验

真实项目中单例常被误用的地方

单例不是“全局状态”的代名词。比如把用户配置、API token、主题设置等全塞进一个单例里,会导致耦合、难以测试、无法多实例隔离(比如同时管理多个账号)。

  • 优先考虑依赖注入(DI)或模块顶层变量,比手写单例更易维护
  • 浏览器扩展、微前端、SSR 环境下,单例容易跨上下文污染(比如服务端渲染时共享了客户端实例)
  • 如果需要“每个 tab 独立单例”,得结合 window.namelocalStorage 做命名空间隔离

单例的关键不在“怎么写”,而在“为什么必须唯一”。没想清楚生命周期、共享边界和销毁时机,代码越“规范”越难调试。

今天带大家了解了的相关知识,希望对你有所帮助;关于文章的技术知识我们会一点点深入介绍,欢迎大家关注golang学习网公众号,一起学习编程~

Java中Iterator遍历集合方法详解Java中Iterator遍历集合方法详解
上一篇
Java中Iterator遍历集合方法详解
Java实现小型留言板教程
下一篇
Java实现小型留言板教程
查看更多
最新文章
查看更多
课程推荐
  • 前端进阶之JavaScript设计模式
    前端进阶之JavaScript设计模式
    设计模式是开发人员在软件开发过程中面临一般问题时的解决方案,代表了最佳的实践。本课程的主打内容包括JS常见设计模式以及具体应用场景,打造一站式知识长龙服务,适合有JS基础的同学学习。
    543次学习
  • GO语言核心编程课程
    GO语言核心编程课程
    本课程采用真实案例,全面具体可落地,从理论到实践,一步一步将GO核心编程技术、编程思想、底层实现融会贯通,使学习者贴近时代脉搏,做IT互联网时代的弄潮儿。
    516次学习
  • 简单聊聊mysql8与网络通信
    简单聊聊mysql8与网络通信
    如有问题加微信:Le-studyg;在课程中,我们将首先介绍MySQL8的新特性,包括性能优化、安全增强、新数据类型等,帮助学生快速熟悉MySQL8的最新功能。接着,我们将深入解析MySQL的网络通信机制,包括协议、连接管理、数据传输等,让
    500次学习
  • JavaScript正则表达式基础与实战
    JavaScript正则表达式基础与实战
    在任何一门编程语言中,正则表达式,都是一项重要的知识,它提供了高效的字符串匹配与捕获机制,可以极大的简化程序设计。
    487次学习
  • 从零制作响应式网站—Grid布局
    从零制作响应式网站—Grid布局
    本系列教程将展示从零制作一个假想的网络科技公司官网,分为导航,轮播,关于我们,成功案例,服务流程,团队介绍,数据部分,公司动态,底部信息等内容区块。网站整体采用CSSGrid布局,支持响应式,有流畅过渡和展现动画。
    485次学习
查看更多
AI推荐
  • ljg-skills -
    ljg-skills
    ljg-skills 是李继刚开源的 AI 技能与提示词集合,面向大模型使用者整理了一批可复用的 prompt、角色设定和任务技能模板,适合用于学习提示词设计、搭建个人 AI 工作流和沉淀团队常用智能体能力。
    4395次使用
  • MELO音乐 - AI 音乐生成平台,支持多模态创作能力
    MELO音乐
    MELO音乐是一站式AI视频与音乐制作助手,对标suno, udio的高品质体验。提供伴奏生成、原创写词、无损导出、哼唱识曲、混音变声等全套音频与短视频编辑工具。无论是流行Kpop、电音说唱、民谣古风、摇滚儿歌还是商用轻音乐,MELO为你免费谱曲,轻松做同款!
    4065次使用
  • UniScribe - AI 免费在线音视频转文字平台
    UniScribe
    UniScribe 是一款 AI 音视频转文字与内容整理工具,支持上传音频、视频文件或粘贴 YouTube 链接,自动生成转写文本、摘要、思维导图和关键问题,并支持多格式导出,适合会议记录、课程学习、访谈整理和内容创作复盘。
    4047次使用
  • 剧云 - 免费 AI 智能中文剧本创作平台
    剧云
    剧云是专业中文剧本创作平台,安全稳定运行十余年,集成AI编剧、剧本医生审核、人物小传、剧情关系图、大纲编写、多人协作、Word导入导出、版权管控功能,数据安全防护,轻松高效创作剧本。
    4233次使用
  • 万象有声 - AI 一站式有声内容创作平台
    万象有声
    万象有声,一个专为有声创作者打造的新一代智能有声内容创作平台。平台提供专业的智能拆章、智能画本编辑、AI配音、AI生成音效、后期制作、智能对轨、智能审听等有声创作全流程工具,可以帮助创作者高效、低成本创作出引人入胜的有声作品。立即体验,让有声书制作更简单!
    4203次使用
微信登录更方便
  • 密码登录
  • 注册账号
登录即同意 用户协议隐私政策
返回登录
  • 重置密码