JS实现单例模式的多种方案

简介: 今天在复习设计模式中的-创建型模式,发现JS实现单例模式的方案有很多种,稍加总结了一下,列出了如下的6种方式与大家分享大体上将内容分为了ES5(Function)与ES6(Class)实现两种部分

JS实现单例模式的多种方案


今天在复习设计模式中的-创建型模式,发现JS实现单例模式的方案有很多种,稍加总结了一下,列出了如下的6种方式与大家分享


大体上将内容分为了ES5(Function)与ES6(Class)实现两种部分


单例模式的概念


  • 一个实例只生产一次
  • 保证一个类仅有一个实例,并提供一个访问它的全局访问点


方式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);


相关文章
|
存储 JavaScript 前端开发
Vuex详解:Vue.js的状态管理方案
Vuex详解:Vue.js的状态管理方案
162 1
|
2月前
|
JavaScript 前端开发 测试技术
在 golang 中执行 javascript 代码的方案详解
本文介绍了在 Golang 中执行 JavaScript 代码的四种方法:使用 `otto` 和 `goja` 嵌入式 JavaScript 引擎、通过 `os/exec` 调用 Node.js 外部进程以及使用 WebView 嵌入浏览器。每种方法都有其适用场景,如嵌入简单脚本、运行复杂 Node.js 脚本或在桌面应用中显示 Web 内容。
145 15
在 golang 中执行 javascript 代码的方案详解
|
2月前
|
存储 网络架构
Next.js 实战 (四):i18n 国际化的最优方案实践
这篇文章介绍了Next.js国际化方案,作者对比了网上常见的方案并提出了自己的需求:不破坏应用程序的目录结构和路由。文章推荐使用next-intl库来实现国际化,并提供了详细的安装步骤和代码示例。作者实现了国际化切换时不改变路由,并把当前语言的key存储到浏览器cookie中,使得刷新浏览器后语言不会失效。最后,文章总结了这种国际化方案的优势,并提供Github仓库链接供读者参考。
105 5
|
5月前
|
自然语言处理 JavaScript 前端开发
一文梳理JavaScript中常见的七大继承方案
该文章系统地概述了JavaScript中七种常见的继承模式,包括原型链继承、构造函数继承、组合继承、原型式继承、寄生式继承、寄生组合继承等,并探讨了每种模式的实现方式及其优缺点。
一文梳理JavaScript中常见的七大继承方案
|
4月前
|
JavaScript 前端开发
原生js常见报错及其处理方案
原生js常见报错及其处理方案
69 0
|
6月前
|
设计模式 存储 JavaScript
JS:单例模式 —— 百度考题 (二)
JS:单例模式 —— 百度考题 (二)
|
6月前
|
设计模式 JavaScript 前端开发
JS:单例模式 —— 百度考题 (一)
JS:单例模式 —— 百度考题 (一)
|
7月前
|
缓存 监控 JavaScript
常见的JS优化方案都有那些
【7月更文挑战第7天】 JavaScript优化包括代码优化(箭头函数、解构赋值、模板字面量、展开运算符、高阶函数)、DOM操作优化(减少操作、事件委托、节流防抖)、异步优化(Promise、Web Workers)、缓存策略(结果缓存、HTTP缓存)、压缩合并以及性能分析和监控。通过这些方法,提升网页性能和用户体验。
54 1
|
7月前
|
JavaScript 前端开发 数据可视化
js 实现动画的两种方案对比:setTimeout vs RAF (requestAnimationFrame)
js 实现动画的两种方案对比:setTimeout vs RAF (requestAnimationFrame)
102 2
|
7月前
|
设计模式 JavaScript 前端开发
js设计模式【详解】—— 单例模式
js设计模式【详解】—— 单例模式
42 1

热门文章

最新文章