JavaScript单例模式详解:原理、实现与惰性创建

作者:代码拾荒

时间:2026-10-29

浏览:79

本文深入解析JavaScript中的单例模式,阐述其保证类仅有一个实例的核心定义。通过对比全局变量、命名空间及闭包封装,探讨如何避免命名污染。重点介绍惰性单例的实现原理,利用高阶函数统一管理实例创建,并结合懒加载与预加载场景,提供完整的代码示例与最佳实践。

文章目录

单例模式定义与核心目标

一、定义

单例模式的核心目标是确保一个类在整个应用程序生命周期中只存在一个实例,并提供一个全局访问点以获取该实例。在实际开发场景中,例如点击登录按钮时弹出的登录浮窗,无论用户触发多少次点击操作,页面上始终只应存在一个登录浮窗实例。这种场景非常适合应用单例模式来管理资源创建。

单例模式实现原理

二、实现原理

实现单例模式的逻辑相对直观。主要思路是引入一个状态变量来标记当前类是否已经创建过对象。如果该变量指示对象已存在,则在后续请求获取该类实例时,直接返回之前缓存的对象,从而避免重复创建。

全局变量与假单例辨析

三、假单例

虽然全局变量在形式上只声明了一次,但它并不等同于单例模式。然而,在JavaScript开发实践中,开发者经常将全局变量当作单例来使用,以简化代码结构。


var a = {};

避免命名污染的两种策略

降低全局变量带来的命名污染 (1)使用命名空间


var namespace1 = {
  a: function(){},
  b: 2
}

(1)使用命名空间


var user = (function() {
  var _name = 'lee',
    _age = '25';
  return {
    getUserInfo: function() {
      return _name + ":" + _age;
    }
  };
})();

惰性单例与高阶函数实现

(2)使用闭包封装私有变量


var getSingle = function(fn) {
  var result;
  return function() {
    return result || (result = fn.apply(this, arguments));
  };
};

// 测试
function testSingle(){}
getSingle(testSingle)() === getSingle(testSingle)();  // true

懒加载与预加载技术补充

四、惰性单例:在需要的时候才能创建对象实例

五、补充:


var lazyload = function() {
  console.log(1);
  lazyload = function() {
    console.log(2);
  }
  return lazyload();
}

lazyload();

(1)懒加载


var preload = (function() {
  console.log(1);
  preload = function() {
    console.log(2);
  };
  return preload;
})();

preload();

(2)预加载

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章