当前位置: 首页 > news >正文

JavaScript 中的单例模式

单例模式在 JavaScript 中是一种确保类只有一个实例,并提供全局访问点的方式。由于 JavaScript 的语言特性(如对象字面量、模块系统等),实现单例有多种方式。

常见实现方式

1. 对象字面量(最简单的单例)

const singleton = {property: "value",method: function() {console.log("I am a method");}
};// 使用
singleton.method();

特点

  • 对象字面量本身就是单例

  • 无法延迟初始化

  • 不能私有化成员

2. 闭包实现(带私有成员)

const Singleton = (function() {// 私有变量let instance;function init() {// 私有方法和属性const privateVar = "I am private";const privateRandom = Math.random();return {// 公共方法publicMethod: function() {console.log("Public can see me");},// 公共属性publicProperty: "I am public",// 访问私有变量的方法getPrivateVar: function() {return privateVar;},getRandomNumber: function() {return privateRandom;}};}return {getInstance: function() {if (!instance) {instance = init();}return instance;}};
})();// 使用
const instance1 = Singleton.getInstance();
const instance2 = Singleton.getInstance();console.log(instance1 === instance2); // true
console.log(instance1.getRandomNumber() === instance2.getRandomNumber()); // true

特点

  • 真正的单例实现

  • 可以包含私有成员

  • 延迟初始化

  • 线程安全(JS是单线程)

3. ES6 Class 实现

class Singleton {constructor() {if (!Singleton.instance) {this._data = [];Singleton.instance = this;}return Singleton.instance;}add(item) {this._data.push(item);}get(id) {return this._data.find(item => item.id === id);}
}// 使用
const instance1 = new Singleton();
const instance2 = new Singleton();instance1.add({ id: 1, name: "test" });
console.log(instance2.get(1)); // { id: 1, name: "test" }
console.log(instance1 === instance2); // true

4. 模块模式(现代JS常用方式)

// singleton.js
let instance = null;
let data = []; // 私有变量export default class Singleton {constructor() {if (!instance) {instance = this;}return instance;}add(item) {data.push(item);}get(id) {return data.find(item => item.id === id);}getAll() {return [...data];}
}// 使用
import Singleton from './singleton.js';const instance1 = new Singleton();
const instance2 = new Singleton();instance1.add({ id: 1, name: "Item 1" });
console.log(instance2.getAll()); // [{ id: 1, name: "Item 1" }]

实际应用场景

  1. 全局状态管理

    // 类似Redux的store就是单例
    const store = {state: { count: 0 },increment() {this.state.count++;}
    };
  2. 对话框/模态框管理

    const Modal = (function() {let instance;function createModal() {const modal = document.createElement('div');// 初始化模态框...return {open: () => modal.style.display = 'block',close: () => modal.style.display = 'none'};}return {getInstance: function() {if (!instance) {instance = createModal();}return instance;}};
    })();
  3. 缓存系统

    const Cache = {data: {},set(key, value) {this.data[key] = value;},get(key) {return this.data[key];},clear() {this.data = {};}
    };

注意事项

  1. 模块系统本身就是单例:在现代JavaScript中,ES6模块默认就是单例

    // logger.js
    export default {log(message) {console.log(message);}
    }// 无论多少次import,得到的都是同一个对象
  2. 测试困难:单例可能导致测试困难,因为状态是共享的

  3. 全局污染:过度使用单例可能导致命名冲突和难以追踪的依赖关系

  4. Node.js中的单例:在Node.js中,模块缓存确保require多次返回同一个实例

JavaScript中的单例模式相比传统面向对象语言更灵活,可以根据具体需求选择适合的实现方式。

相关文章:

  • 单例模式(线程安全)
  • Uniapp 自定义TabBar + 动态菜单实现教程(Vuex状态管理详解)
  • Nginx详细使用
  • 乐家桌面安卓版2025下载-乐家桌面软件纯净版安装分享码大全
  • buildadmin 自定义单元格渲染
  • AOSP Android14 Launcher3——点击桌面图标启动应用动画流程
  • Docker安装beef-xss
  • Python3网络爬虫开发--爬虫基础
  • 多语言商城系统开发流程
  • 【Easylive】consumes = MediaType.MULTIPART_FORM_DATA_VALUE 与 @RequestPart
  • 【英语语法】词法---连词
  • Spring是如何实现资源文件的加载
  • LX5-STM32F103C8T6引脚分布与定义
  • longchain使用通义千问
  • 如何对只能有一个`public`顶层类这句话的理解
  • 大文件分片上传进阶版(新增md5校验、上传进度展示、并行控制,智能分片、加密上传、断点续传、自动重试),实现四位一体的网络感知型大文件传输系统‌
  • Maxscript调用Newtonsoft.Json解析Json
  • 从 TinyZero 到 APR:语言模型推理能力的探索与自适应并行化
  • Linux——入门常用基础指令
  • 基于unsloth微调一个越狱大模型
  • 新能源车盈利拐点:8家上市车企去年合计净利854亿元,多家扭亏
  • 经营业绩持续稳中向好,国铁集团2024年度和2025年一季度财务决算公布
  • 《求是》杂志发表习近平总书记重要文章《激励新时代青年在中国式现代化建设中挺膺担当》
  • 中方发布《不跪!》视频传递何种信息?外交部回应
  • 瞄准“美丽健康”赛道,上海奉贤如何打造宜居宜业之城?
  • 玉渊谭天丨中方减少美国农产品进口后,舟山港陆续出现巴西大豆船