JS实现单例模式的6种方案汇总
前言
今天在复习设计模式中的-创建型模式，发现JS实现单例模式的方案有很多种，稍加总结了一下，列出了如下的6种方式与大家分享
大体上将内容分为了ES5（Function）与ES6（Class）实现两种部分
单例模式的概念
单例模式就是在系统中保存一个实例，就是一个全局变量，在团队开发中，为了实现一些相似的功能，比如不同页面之间的表单验证，可能需求是不一样的，但是呢命名可能一样，这时就会产生冲突，这时候单例模式就能很好的解决这个问题。
- 一个实例只生产一次
- 保证一个类仅有一个实例，并提供一个访问它的全局访问点
说说它的优点：
1，单例模式声明一个命名空间，它生成一个唯一的全局变量，一个命名空间，可以用声明对象的方式来声明：
var mapleTao={ name:"mapleTao",init:function(){console.log(this.name)}};
有木有发现这个和对象有点类似呢，其实name，init是它的属性，通过mapleTao.name就获取它name的值，通过mapleTao.init()就可以调用init方法，这样在哎处理多需求页面，多人开发时就能很好的解决命名冲突的问题，以及可以更好的维护代码，更好的控制代码。
2，单例模式在全局中只声明一个变量，大家都知道在js中，假设你写了一个方法，如 function aa(){},这样就会在window中生成一个叫aa的变量，当实现一个功能时，在代码封装中，会创建好多函数，好多function，这样就会在window中创建好多变量，会占用更多的内存单元，全局变量的作用域很广，在众多处理函数中都可能改变，这样当出现bug时不容易快速找到，而通过单例模式创建的对象变量中可以更快速的找到问题，从而解决，这大大减少的问题修复的时间以及系统加载的时间。
3.在实现同一个功能的地方比通过new新创建对象对内存对资源的占用更据优势。
方式1
利用instanceof判断是否使用new关键字调用函数进行对象的实例化
function User() {
if (!(this instanceof User)) {
return
}
if (!User._instance) {
this.name = '无名'
User._instance = this
}
return User._instance
}
const u1 = new User()
const u2 = new User()
console.log(u1===u2);// true
方式2
在函数上直接添加方法属性调用生成实例
function User(){
this.name = '无名'
}
User.getInstance = function(){
if(!User._instance){
User._instance = new User()
}
return User._instance
}
const u1 = User.getInstance()
const u2 = User.getInstance()
console.log(u1===u2);
方式3
使用闭包，改进方式2
function User() {
this.name = '无名'
}
User.getInstance = (function () {
var instance
return function () {
if (!instance) {
instance = new User()
}
return instance
}
})()
const u1 = User.getInstance()
const u2 = User.getInstance()
console.log(u1 === u2);
方式4
使用包装对象结合闭包的形式实现
const User = (function () {
function _user() {
this.name = 'xm'
}
return function () {
if (!_user.instance) {
_user.instance = new _user()
}
return _user.instance
}
})()
const u1 = new User()
const u2 = new User()
console.log(u1 === u2); // true
当然这里可以将闭包部分的代码单独封装为一个函数
在频繁使用到单例的情况下，推荐使用类似此方法的方案，当然内部实现可以采用上述任意一种
function SingleWrapper(cons) {
// 排除非函数与箭头函数
if (!(cons instanceof Function) || !cons.prototype) {
throw new Error('不是合法的构造函数')
}
var instance
return function () {
if (!instance) {
instance = new cons()
}
return instance
}
}
function User(){
this.name = 'xm'
}
const SingleUser = SingleWrapper(User)
const u1 = new SingleUser()
const u2 = new SingleUser()
console.log(u1 === u2);
方式5
在构造函数中利用new.target判断是否使用new关键字
class User{
constructor(){
if(new.target !== User){
return
}
if(!User._instance){
this.name = 'xm'
User._instance = this
}
return User._instance
}
}
const u1 = new User()
const u2 = new User()
console.log(u1 === u2);
方式6
使用static静态方法
class User {
constructor() {
this.name = 'xm'
}
static getInstance() {
if (!User._instance) {
User._instance = new User()
}
return User._instance
}
}
const u1 = User.getInstance()
const u2 = User.getInstance()
console.log(u1 === u2);
总结
到此这篇关于JS实现单例模式的文章就介绍到这了,更多相关JS单例模式内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了如何在JavaScript中实现私有属性的写类方式。需要的朋友可以过来参考下，希望对大家有所帮助2013-12-12
最近在做一个简单的鼠标onmouseover时显示层（层里面有多个链接文字），onmouseout 时隐藏层的功能时，发现有诸多问题.2010-07-07
在javascript变量中可以存放两种类型的值：原始值和引用值。原始值存储在栈上的简单字段，也就是值直接存储在变量所标示的位置内。2011-09-09
下面小编就为大家带来一篇超级简易的JS计算器实例讲解(实现加减乘除)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-08-08
这篇文章主要介绍了小程序从手动埋点到自动埋点的实现方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-01-01
javascript跨域方法、原理以及出现问题解决方法（详解）
javascript出于安全方面的考虑，不允许跨域调用其他页面的对象。但是在安全限制的同时也给注入iframe或是ajax应用上带来了不少麻烦。跨域简单的理解就是因为javascript同源策略的限制，a.com域名下的js无法操作b.com 或者是c.a.com域名下的对象2015-08-08
Javascript通常会根据方法或运算符的需要而自动把值转成所需的类型，这可能导致各种错误，接下来为大家介绍下javascript如何强制执行toString()，感兴趣的朋友可以参考下哈2013-04-04
JavaScript中fromCharCode 和 fromCodePoint 的详解与应
本文将详细介绍 JavaScript 中的 String.fromCharCode 和 String.fromCodePoint 方法,这两个方法能够帮助开发者高效地处理字符与编码之间的转换,理解它们的区别与应用,将让你的代码更加灵活和高效,感兴趣的朋友跟随小编一起看看吧2024-12-12
这篇文章主要为大家介绍了JavaScript倒计时定时器和间隔定时器使用详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪<BR>2023-05-05
这篇文章主要介绍了js实现a标签超链接提交form表单的方法,涉及javascript针对表单操作的相关技巧,需要的朋友可以参考下2015-06-06
最新评论