JavaScript单例模式详解:从基础到多种实现方案

作者:拾光

时间:2026-10-28

浏览:175

本文深入解析JavaScript中的单例模式,涵盖对象字面量、闭包封装、惰性初始化及构造函数重写等多种实现方式。通过具体代码示例,展示如何在不同场景下确保类仅有一个实例,并探讨其在系统通信协调中的应用。

文章目录

引言与单例概念

引言

本章起将逐步介绍JavaScript中常用的设计模式实现。本文不赘述模式理论,仅聚焦于具体实现方法。

在传统开发视角中,单例模式确保一个类仅有一个实例。其实现逻辑通常是:先检查实例是否存在,若存在则直接返回,否则创建新实例后返回,从而保证全局唯一性。在JavaScript中,单例常作为命名空间提供者,从全局命名空间提供一个唯一的访问入口。

正文

基础实现:对象字面量与闭包

JavaScript实现单例的方式多样,其中最简单的是使用对象字面量。字面量中可以包含大量属性和方法:

代码如下:

var mySingleton = {
property1: "something",
property2: "something else",
method1: function () {
console.log('hello world');
    }
};

若需扩展该对象,可添加私有成员和方法,并通过闭包在内部封装这些变量和函数声明。仅暴露所需的公共成员和方法,示例代码如下:


代码如下:

var mySingleton = function () {
/* 这里声明私有变量和方法 */
 var privateVariable = 'something private';
 function showPrivate() {
 console.log(privateVariable);
 }
/* 公有变量和方法(可以访问私有变量和方法) */
 return {
 publicMethod: function () {
 showPrivate();
 },
 publicVar: 'the public can see this!'
 };
};
var single = mySingleton();
single.publicMethod(); // 输出 'something private'
console.log(single.publicVar); // 输出 'the public can see this!'

延迟初始化与最佳实践

上述代码结构清晰,但若希望仅在首次使用时才进行初始化以节省资源,该如何处理?我们可以利用另一个构造函数来实现延迟初始化,如下所示:

代码如下:

var Singleton = (function () {
var instantiated;
function init() {
/*这里定义单例代码*/
return {
publicMethod: function () {
console.log('hello world');
            },
publicProperty: 'test'
        };
    }
return {
 getInstance: function () {
 if (!instantiated) {
 instantiated = init();
 }
 return instantiated;
 }
 };
})();
/*调用公有的方法来获取实例:*/
Singleton.getInstance().publicMethod();

了解了单例的实现原理后,接下来探讨其适用场景。单例通常用于系统间各种模式的通信协调。以下代码展示了单例的最佳实践:

代码如下:

var SingletonTester = (function () {
//参数:传递给单例的一个参数集合
 function Singleton(args) {
//设置args变量为接收的参数或者为空(如果没有提供的话)
 var args = args || {};
 //设置name参数
 this.name = 'SingletonTester';
 //设置pointX的值
 this.pointX = args.pointX || 6; //从接收的参数里获取,或者设置为默认值
 //设置pointY的值
 this.pointY = args.pointY || 10;
    }
//实例容器
 var instance;
var _static = {
 name: 'SingletonTester',
//获取实例的方法
 //返回Singleton的实例
 getInstance: function (args) {
 if (instance === undefined) {
 instance = new Singleton(args);
 }
 return instance;
 }
 };
 return _static;
})();
var singletonTest = SingletonTester.getInstance({ pointX: 5 });
console.log(singletonTest.pointX); // 输出 5

其他单例实现方案

其它实现方式

方法1:

代码如下:

function Universe() {
// 判断是否存在实例
 if (typeof Universe.instance === 'object') {
 return Universe.instance;
 }
// 其它内容
 this.start_time = 0;
 this.bang = "Big";
// 缓存
 Universe.instance = this;
// 隐式返回this
}
// 测试
var uni = new Universe();
var uni2 = new Universe();
console.log(uni === uni2); // true

方法2:

代码如下:

function Universe() {
// 缓存的实例
 var instance = this;
// 其它内容
 this.start_time = 0;
 this.bang = "Big";
// 重写构造函数
 Universe = function () {
 return instance;
 };
}
// 测试
var uni = new Universe();
var uni2 = new Universe();
uni.bang = "123";
console.log(uni === uni2); // true
console.log(uni2.bang); // 123

方法3:

代码如下:

function Universe() {
// 缓存实例
 var instance;
// 重新构造函数
 Universe = function Universe() {
 return instance;
 };
// 后期处理原型属性
 Universe.prototype = this;
// 实例
 instance = new Universe();
// 重设构造函数指针
 instance.constructor = Universe;
// 其它功能
 instance.start_time = 0;
 instance.bang = "Big";
return instance;
}
// 测试
var uni = new Universe();
var uni2 = new Universe();
console.log(uni === uni2); // true
// 添加原型属性
Universe.prototype.nothing = true;
var uni = new Universe();
Universe.prototype.everything = true;
var uni2 = new Universe();
console.log(uni.nothing); // true
console.log(uni2.nothing); // true
console.log(uni.everything); // true
console.log(uni2.everything); // true
console.log(uni.constructor === Universe); // true

方式4:

代码如下:

var Universe;
(function () {
var instance;
Universe = function Universe() {
if (instance) {
 return instance;
 }
instance = this;
// 其它内容
 this.start_time = 0;
 this.bang = "Big";
 };
} ());
//测试代码
var a = new Universe();
var b = new Universe();
alert(a === b); // true
a.bang = "123";
alert(b.bang); // 123

实用工具推荐

电子包浆

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

使用 ›
图片压缩

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

使用 ›
相关文章