设计模式——JS中的单例模式应用

单例模式的定义

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

实现方法

一般是先判断实例是否存在，如果存在直接返回，不存在就创建了再返回，这就确保了一个类只有一个实例对象。

思路

一个类能返回一个对象的引用（并且永远是同一个）和一个获得该实例的方法（静态方法，通常使用 getInstance 名称）。
当我们调用这个方法时，如果类持有的引用不为空就返回该引用，否则就创建该类的实例，并且将实例引用赋值给该类保持的那个引用再返回。同时将该类的构造函数定义为私有方法，避免其他函数使用该构造函数来实例化对象，只通过该类的静态方法来得到该类的唯一实例。

使用场景

1. 一个网站的登录，点击登录后弹出一个登录弹框，即使再次点击，也不会再出现一个相同的弹框。
2. 一个音乐播放程序，如果用户打开了一个音乐，又想打开一个音乐，那么之前的播放界面就会自动关闭，切换到当前的播放界面。这些都是单例模式的应用场景。

单例模式的实现

1. es6 实现

class SingleManage1 {
    constructor({ name, level }) {
        if (!SingleManage1.instance) {
            this.name = name;
            this.level = level
            SingleManage1.instance = this;
        }
        return SingleManage1.instance
    }
}

let boss1 = new SingleManage1({
    name: "Jokul",
    level: "1"
})
let boss2 = new SingleManage1({
    name: "Jokul2",
    level: "2"
})
console.log(boss1 === boss2) // true

2. es5 实现

function SingleManage2(manage) {
    this.name = manage.name
    this.level = manage.level
    this.info = function () {
        console.log("Boss's name is " + this.name + " and level is " + this.level)
    }
}
SingleManage2.getInstance = function (manage) {
    if (!this.instance) {
        this.instance = new SingleManage2(manage)
    }
    return this.instance
}
var boss3 = SingleManage2.getInstance({
    name: "Jokul",
    level: "1"
})
var boss4 = SingleManage2.getInstance({
    name: "Jokul2",
    level: "2"
})
boss3.info() // Boss's name is Jokul and level is 1
boss4.info() // Boss's name is Jokul and level is 1

3. 实现一个 storage

// 先实现一个基础的 StorageBase 类，把 getItem 和 setItem 方法放在它的原型链上
function StorageBase() {}
StorageBase.prototype.getItem = function (key) {
    return localStorage.getItem(key)
}
StorageBase.prototype.setItem = function (key, value) {
    return localStorage.setItem(key, value)
}

// 以闭包的形式创建一个引用自由变量的构造函数
const Storage = (function () {
    let instance = null
    return function () {
        // 判断自由变量是否为null
        if (!instance) {
            // 如果为null则new出唯一实例
            instance = new StorageBase()
        }
        return instance
    }
})()

// 这里其实不用 new Storage 的形式调用，直接 Storage() 也会有一样的效果 
const storage1 = new Storage()
const storage2 = new Storage()

storage1.setItem('name', 'yd')
storage1.getItem('name') // yd
storage2.getItem('name') // yd

console.log(storage1 === storage2) // true