单例模式的实现

海底火旺2025-07-15 14:38

前言

在软件开发中，单例模式是一种常见且强大的设计模式，它确保一个类只有一个实例，并提供了全局访问点。这种模式在JavaScript中尤为重要，因为它帮助我们解决全局状态管理问题，避免重复创建对象带来的资源浪费。

在JavaScript生态中，单例模式被广泛应用于各种场景：

  • 全局状态管理（如Redux store）
  • 缓存系统
  • 浏览器存储封装
  • 日志记录器
  • 数据库连接池

本文将探讨JavaScript中单例模式的实现方式，从传统的ES5闭包到现代的ES6类实现，并展示如何基于localStorage封装一个单例存储对象。

单例模式核心概念

什么是单例模式？

单例模式确保一个类只有一个实例，并提供全局访问点。这意味着无论你尝试创建多少次实例，实际上得到的都是同一个对象引用。

为什么需要单例？

  1. 资源优化：避免重复创建相同对象
  2. 状态一致性：确保全局只有一个共享状态
  3. 访问控制：提供统一的访问入口
  4. 性能提升：减少内存占用和初始化开销

ES6类实现单例Storage

ES6引入的class语法糖让JavaScript面向对象编程更加直观。下面我们基于class实现一个单例的localStorage封装：

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ES6类实现单例Storage</title>
</head>
<body>
<script>
class Storage {
    // 静态属性，用于存储唯一实例
    static instance;
    
    // 静态方法获取实例
    static getInstance() {
        // 如果实例不存在，则创建新实例
        if (!Storage.instance) {
            Storage.instance = new Storage();
        }
        return Storage.instance;
    }
    
    constructor() {
        // 确保不会重复实例化
        if (Storage.instance) {
            return Storage.instance;
        }
        // 初始化代码...
        Storage.instance = this;
    }
    
    getItem(key) {
        return localStorage.getItem(key);
    }
    
    setItem(key, value) {
        localStorage.setItem(key, value);
    }
}

// 测试单例行为
const storage1 = Storage.getInstance();
const storage2 = Storage.getInstance();

console.log(storage1 === storage2); // true

storage1.setItem('name', '老板');
storage2.setItem('name', '小王');

console.log(storage1.getItem('name')); // 小王
console.log(storage2.getItem('name')); // 小王
</script>
</body>
</html>

ES6实现解析

  1. 静态属性instance：用于存储类的唯一实例
  2. 静态方法getInstance()：提供全局访问点，控制实例创建
  3. 构造函数保护：防止直接调用new创建多个实例
  4. 封装localStorage：提供统一的getItem/setItem接口

背后的原型机制

ES6的class本质上是原型继承的语法糖。当我们定义class Storage时：

  • 创建了一个名为Storage的函数
  • 将方法添加到Storage.prototype上
  • 静态方法直接添加到Storage函数对象上

这种实现方式结合了ES6的简洁性和传统原型的灵活性。

ES5闭包实现单例Storage

在ES6之前，开发者主要使用闭包和函数作用域来实现单例模式：

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>闭包实现单例Storage</title>
</head>
<body>
<script>
// 基础构造函数
function StorageBase() {
    // 原型方法
    StorageBase.prototype.getItem = function(key) {
        return localStorage.getItem(key);
    };
    
    StorageBase.prototype.setItem = function(key, value) {
        localStorage.setItem(key, value);
    };
}

// 使用闭包创建单例
const Storage = (function() {
    let instance = null;
    
    return function() {
        if (!instance) {
            instance = new StorageBase();
        }
        return instance;
    }
})();

// 测试单例行为
const storage1 = new Storage();
const storage2 = new Storage();

console.log(storage1 === storage2); // true

storage1.setItem('name', '同志');
console.log(storage1.getItem('name')); // 同志
console.log(storage2.getItem('name')); // 同志
</script>
</body>
</html>

闭包实现解析

  1. 立即执行函数(IIFE)：创建闭包环境，保存instance状态
  2. instance变量：在闭包中存储唯一实例（自由变量）
  3. 构造函数返回函数：控制实例创建逻辑，每次返回同一实例

其实以下方法也能实现：

javascript 复制代码 
let instance;
const Storage =  function(){
    if(!instance){
        instance = new StorageBase()
    }
    return instance
}

简单来说就是创造一个全局变量，当我们要使用它的时候，就引入，每次都不用额外创建一个新的对象。但我们知道全局变量容易污染。诶，这时候闭包就出来了，闭包：我能搞一个自由变量出来，代替全局变量。就有上面的闭包方法了。

[[Construct]]内部机制

当我们使用new操作符调用函数时，JavaScript引擎会：

创建一个新对象 -> 将该对象的原型指向构造函数的prototype属性 -> 将this绑定到新对象 -> 执行构造函数内部代码

在单例实现中，我们重写了这个过程：当instance已存在时，直接返回已有的实例，而不是创建新对象。或者说每次new新对象时，this 绑定都是instance 实例，所以都是新建同一对象。

ES5到ES6的转变

从原型到类的演变

在ES5中，我们使用函数和原型链实现面向对象编程：

javascript 复制代码 
// ES5构造函数
function Person(name) {
    this.name = name;
}

// 原型方法
Person.prototype.sayHello = function() {
    console.log('Hello, ' + this.name);
};

这时候的js 还像个小孩，虽然简单实用，连面向对象都不用学习，只需要函数 + prototype 完成类的方法。但是一切都是在革新中不断成熟优秀的。为了有更多兼容性，为了拥抱更多开发者，为了能企业级大型项目开发。es6来了。

ES6引入class语法，使代码更加清晰：

javascript 复制代码 
class Person {
    constructor(name) {
        this.name = name;
    }
    
    sayHello() {
        console.log(`Hello, ${this.name}`);
    }
}

class语法

  1. 更直观：接近传统面向对象语言
  2. 更安全：必须使用new调用
  3. 内置的静态方法支持：使用static关键字
  4. 更好的继承机制：extends和super关键字

不管怎么说，面向对象编程都是当前的主流节奏，跟上class的节奏就对了

单例Storage的进阶封装

在实际项目中，我们通常需要更健壮的Storage封装，再加一点小细节：

javascript 复制代码 
class AdvancedStorage {
    static instance;
    
    static getInstance() {
        if (!AdvancedStorage.instance) {
            AdvancedStorage.instance = new AdvancedStorage();
        }
        return AdvancedStorage.instance;
    }
    
    constructor() {
        if (AdvancedStorage.instance) {
            return AdvancedStorage.instance;
        }
        // 检查localStorage可用性
        this.isSupported = this.checkSupport();
        AdvancedStorage.instance = this;
    }
    
    checkSupport() {
        try {
            const testKey = '__storage_test__';
            localStorage.setItem(testKey, testKey);
            localStorage.removeItem(testKey);
            return true;
        } catch (e) {
            console.error('LocalStorage is not supported:', e);
            return false;
        }
    }
    
    getItem(key) {
        if (!this.isSupported) return null;
        try {
            return JSON.parse(localStorage.getItem(key));
        } catch (e) {
            return localStorage.getItem(key);
        }
    }
    
    setItem(key, value) {
        if (!this.isSupported) return false;
        const data = typeof value === 'string' ? value : JSON.stringify(value);
        localStorage.setItem(key, data);
        return true;
    }
    
    removeItem(key) {
        if (!this.isSupported) return false;
        localStorage.removeItem(key);
        return true;
    }
    
    clear() {
        if (!this.isSupported) return false;
        localStorage.clear();
        return true;
    }
}

// 使用示例
const storage = AdvancedStorage.getInstance();
storage.setItem('user', { name: 'John', age: 30 });
console.log(storage.getItem('user')); // {name: "John", age: 30}

进阶功能

  1. 支持JSON序列化：自动处理对象存储
  2. 错误处理：捕获可能的localStorage异常
  3. 兼容性检查：确保localStorage可用
  4. 类型安全：正确处理各种数据类型
  5. 链式调用支持：可扩展为返回this实现链式调用

单例模式的注意事项

潜在问题

  1. 全局状态污染：过度使用单例可能导致难以追踪的状态变化
  2. 测试困难：单例状态可能影响单元测试的独立性
  3. 内存泄漏：长期存在的单例可能持有不再需要的引用
  4. 灵活性降低：单例模式限制了类的扩展能力

在真正需要时使用即可，别为了性能优化而性能优化

总结

单例模式是JavaScript开发中不可或缺的工具，它帮助我们管理全局状态，优化资源使用，并提供一致的访问点。从ES5的闭包实现到ES6的类语法，JavaScript提供了多种实现单例的优雅方式。

关键要点：

  1. 使用静态属性和方法实现ES6类单例
  2. 闭包为ES5提供了强大的单例实现能力
  3. 封装localStorage是单例模式的典型应用
  4. 理解原型和[[Construct]]机制有助于深入掌握单例实现
  5. 权衡单例模式的优缺点，避免滥用

随着JavaScript语言的发展，单例模式的实现方式也在不断进化。无论选择哪种实现方式，理解其核心思想------确保类只有一个实例------才是掌握单例模式的关键。

设计模式不是银弹，而是工具箱中的锤子和钉子。知道何时使用它们，比知道如何使用它们更为重要。

相关推荐
江山如画，佳人北望5 分钟前
SLAM 前端
前端
患得患失94911 分钟前
【前端】【Iconify图标库】【vben3】createIconifyIcon 实现图标组件的自动封装
前端
颜酱13 分钟前
抽离ant-design后台的公共查询设置
前端·javascript·ant design
用户952511514015528 分钟前
js最简单的解密分析
前端
FogLetter28 分钟前
深入浅出React-Router-Dom：从前端路由到SPA架构的华丽转身
前端·react.js
绅士玖31 分钟前
JavaScript 设计模式之单例模式🚀
前端·javascript·设计模式
Dream耀31 分钟前
useReducer：React界的"灭霸手套"，一个dispatch搞定所有状态乱局
前端·javascript·react.js
余大侠在劈柴38 分钟前
pdf.js 开发指南：在 Web 项目中集成 PDF 预览功能
前端·javascript·学习·pdf
钟智强1 小时前
Flutter 前端开发中的常见问题全面解析
android·前端·flutter·ios·前端框架·dart
拾光拾趣录1 小时前
JavaScript屏幕切换检测方案
前端·javascript
热门推荐
01全球最强模型Grok4，国内已可免费使用！（附教程）02KGG转MP3工具|非KGM文件|解密音频03Coze扣子平台完整体验和实践（附国内和国际版对比）04身弱武修法：玄之又玄，奇妙之门05集群聊天服务器---MySQL数据库的建立06扣子（coze）实战|我用扣子搭建了一个自动分析小红薯笔记内容的AI应用|详细步骤拆解07基于odoo17的设计模式详解---单例模式08使用Ruby接入实时行情API教程09DeepSeek各版本说明与优缺点分析10LOT: 通过逻辑增强大型语言模型的零样本Chain-of-Thought推理能力