当前位置:首页 > JavaScript

js 实现单例模式

2026-01-30 15:46:55JavaScript

使用闭包实现单例模式

闭包可以封装私有变量,确保实例唯一性。通过立即执行函数返回一个获取实例的方法,首次调用时创建实例,后续调用直接返回已创建的实例。

const Singleton = (function() {
  let instance;

  function createInstance() {
    const object = new Object("I am the instance");
    return object;
  }

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

const instance1 = Singleton.getInstance();
const instance2 = Singleton.getInstance();
console.log(instance1 === instance2); // true

使用 ES6 Class 实现单例

通过静态属性和方法控制实例化过程。静态属性存储唯一实例,静态方法负责实例的创建和返回。

class Singleton {
  static instance;

  constructor() {
    if (Singleton.instance) {
      return Singleton.instance;
    }
    Singleton.instance = this;
  }
}

const obj1 = new Singleton();
const obj2 = new Singleton();
console.log(obj1 === obj2); // true

使用模块特性实现单例

ES6 模块系统天然支持单例模式。模块在第一次被导入时会被缓存,后续导入都会返回同一个实例。

// singleton.js
let instance;

export default class Singleton {
  constructor() {
    if (instance) {
      return instance;
    }
    instance = this;
  }
}

// 使用方式
import Singleton from './singleton.js';
const a = new Singleton();
const b = new Singleton();
console.log(a === b); // true

惰性单例实现

延迟实例化直到真正需要时,适用于资源消耗较大的对象。通过代理模式实现按需创建。

class HeavyResource {
  constructor() {
    console.log('HeavyResource initialized');
  }
}

const LazySingleton = (function() {
  let instance;

  return {
    getInstance: function() {
      if (!instance) {
        instance = new HeavyResource();
      }
      return instance;
    }
  };
})();

// 只有调用时才初始化
const resource = LazySingleton.getInstance();

线程安全的单例实现

虽然 JavaScript 是单线程语言,但异步场景下也需要考虑并发问题。使用立即初始化的方式避免竞争条件。

js 实现单例模式

const ThreadSafeSingleton = new (function() {
  const instance = this;
  this.getInstance = function() {
    return instance;
  };
})();

// 任何时候调用都返回同一实例
const safeInstance = ThreadSafeSingleton.getInstance();

每种实现方式适用于不同场景,闭包方式兼容性好,ES6 Class 语法更清晰,模块方式最简洁。根据具体需求选择合适的方法,注意考虑惰性加载、线程安全等额外需求。

标签: 模式js
分享给朋友:

相关文章

js实现复制到剪贴板

js实现复制到剪贴板

使用document.execCommand方法(传统方式,已废弃但部分浏览器仍支持) 该方法适用于旧版浏览器,但已被标记为废弃。执行前需确保文本已被选中: function copyToClipb…

js实现预览

js实现预览

文件上传预览实现 使用JavaScript实现文件上传预览功能,可以通过FileReader对象读取文件内容并显示预览。以下代码支持图片、文本和PDF文件的预览: // HTML部分需要包含…

js进度条实现

js进度条实现

使用HTML和CSS创建基础结构 在HTML中创建一个容器元素用于显示进度条,通常使用<div>元素。CSS用于设置进度条的样式,包括宽度、高度、颜色和圆角等属性。 <div cl…

js图片轮播的实现

js图片轮播的实现

基础图片轮播实现 使用HTML、CSS和JavaScript实现一个简单的图片轮播效果。HTML部分定义轮播容器和图片,CSS负责样式和过渡效果,JavaScript处理逻辑。 <div cl…

js实现原理

js实现原理

JavaScript 实现原理 JavaScript 是一种解释型语言,其实现原理涉及多个核心组件和运行机制,包括引擎、运行时环境、事件循环等。 引擎与解释执行 现代 JavaScript 引擎(如…

js实现删除

js实现删除

使用 splice 方法删除数组元素 splice 方法可以删除数组中的元素,并返回被删除的元素。它接受两个参数:起始索引和要删除的元素数量。 const array = [1, 2, 3, 4…