放肆青春的博客
首页
前端
算法
网络
面试
技术
后端
运维
杂项
数据库
工具
网址
电脑
个人
文章
  • 分类
  • 标签
  • 归档
github (opens new window)
gitee (opens new window)

放肆青春

一个前端菜鸟的技术成长之路
首页
前端
算法
网络
面试
技术
后端
运维
杂项
数据库
工具
网址
电脑
个人
文章
  • 分类
  • 标签
  • 归档
github (opens new window)
gitee (opens new window)
  • 技术汇总

    • 技术总结
    • 技术文章
  • 技术术语

  • 技术方案

    • 技术场景汇总
    • 技术方案

    • 前端方案

    • 三方平台

    • 图片方案

    • 文件方案

  • 技术点

  • 设计模式及原则

    • 设计模式
    • 创建型模式

      • 单例模式
        • 单例模式(创建型模式)
          • 注意
          • 必要性
          • 优点
          • 常见的单例模式
        • 单例模式实现方式
          • 类实现
          • 闭包实现
      • 工厂模式
    • 结构型模式

    • 行为型模式

    • 设计原则
  • technology
放肆青春
2021-03-31

单例模式

# 单例模式(创建型模式)

提供了一种创建对象的最佳方式

意图:保证一个类仅有一个实例,并提供一个访问它的全局访问点。

主要解决:一个全局使用的类频繁地创建与销毁。

何时使用:当您想控制实例数目,节省系统资源的时候。

如何解决:判断系统是否已经有这个单例,如果有则返回,如果没有则创建。

关键代码:构造函数是私有的。

# 注意

  1. 单例类只能有一个实例。

  2. 单例类必须自己创建自己的唯一实例。

  3. 单例类必须给所有其他对象提供这一实例。

# 必要性

  1. 为了将“描述同一件事务的属性或者特征归纳汇总在一起”,同时避免全局变量污染.

  2. 模块化开发之间数据的共享.(状态管理)

# 优点

  1. 对于频繁使用的对象,可以省略创建对象所花费的时间.

  2. 由于 new 操作的次数减少,在内存里只有一个实例,减少了内存的开销,尤其是频繁的创建和销毁实例

  3. 全局唯一性,可以保证全局数据和功能的共享.

# 常见的单例模式

  1. 浏览器中的window对象

  2. 类库中的全局对象,例如Vuex、Redux

  3. 小程序中的App对象.(getApp()方法其实就是获取唯一的App实例)

# 单例模式实现方式

# 类实现

class SingletonCar {
    constructor () {
        this.name = 'benz';
    }
    static getInstance () {
        if (!SingletonCar.instance) {
            SingletonCar.instance = new SingletonCar();
        }
        return SingletonCar.instance;
    }
}

let car1 = SingletonCar.getInstance();
let car2 = SingletonCar.getInstance();

console.log(car1 === car2)      // true

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

类相当于实例的原型,所有在类中定义的方法,都会被实例继承。

如果在一个方法前,加上static关键字,就表示该方法不会被实例继承,而是直接通过类来调用,这就称为“静态方法”。

静态方法可以直接在父类上调用SingletonCar.getInstance(),而不是在实例对象上调用。如果在实例上调用静态方法,会抛出一个错误,表示不存在该方法。

用类来实现单例模式,只要记住这个getInstance()静态方法就可以了。

# 闭包实现

var SingletonCar = (function () {
    var instance;
    
    var SingletonCarTemp = function () {
        this.name = 'benz';
    };
    
    return function () {
        if (!instance) {
            instance = new SingletonCarTemp();
        }
        return instance;
    }
})();

var car1 = new SingletonCar();
var car2 = new SingletonCar();

console.log(car1 === car2)      // true
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
更新时间: 12/22/2021, 6:20:36 PM
设计模式
工厂模式

← 设计模式 工厂模式→

最近更新
01
前端权限管理
02-24
02
vue2指令
02-24
03
vue2 hook
02-24
更多文章>
Theme by Vdoing | Copyright © 2019-2022 放肆青春
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式