JS 单例模式的实现
单例模式简介
单例模式（Singleton Pattern）是最简单的设计模式之一。这种类型的设计模式属于创建型模式，提供了一种创建对象的最佳方式。
特点：
- 意图：保证一个类仅有一个实例，并提供一个访问它的全局访问点。
- 主要解决：一个全局使用的类频繁地创建与销毁。
- 何时使用：当您想控制实例数目，节省系统资源的时候。
- 如何解决：判断系统是否已经有这个单例，如果有则返回，如果没有则创建。
首先对比一下平时不使用单例模式的情况：
在不适用单例模式的情况下，如下，会得到不同的多个实例：
video.js
class Video{
constructor() {
console.log("video created");
}
}
export { Video };
main.js
import { Video } from "./video.js";
const v1 = new Video();
const v2 = new Video();
console.log(v1 === v2);
控制台输出
方法1：提前构造实例
提前构造一个实例，只向外部暴露该实例的引用，从而实现单例。
但是缺点是需要提前构造实例，而无法做到在需要的时候创建实例。
class Video{
constructor() {
console.log("video created");
}
}
const v = new Video();
export { v };
方法2：构造方法私有化
video.js
class Video{
private constructor() {
console.log("video created");
}
static _ins = null;
static getInstance(){
if(!this._ins){
this._ins = new Video();
}
return this._ins;
}
}
export { Video };
main.js
import { Video } from "./video.js";
const v1 = Video.getInstance();
const v2 = Video.getInstance();
console.log(v1 === v2);
通过将构造方法私有化，外部无法通过new实例化对象，只能通过静态方法getInstance获取实例。
而在类的内部实现中，使用_ins确保只存在一个实例。
缺点：
原生JS不存在private，需要使用TS。
在JS中，如果剔除private，仅通过getInstance也可以实现单例模式。但是这种方法不严格，无法确保每一个调用者不会使用构造函数创建新的实例。
方法3：通用方法——将任意类转为单例
singleton.js
export function singleton(className){
let ins;
return class{
constructor(...args) {
if(!ins){
ins = new className(...args);
}
return ins;
}
};
}
- 这个函数接收一个类，进行改造之后返回一个新的类；
- 使用闭包，存储实例对象
ins； - 新的类的构造函数相当于拦截作用：
- 如果
ins不存在，则将传入的参数转交给原来的类的构造函数，并创建一个实例； - 如果
ins存在，则直接返回存储在闭包中的实例对象。
- 如果
video.js
import { singleton } from "./singleton.js";
class Video{
constructor() {
console.log("video created");
}
}
const newVideo = singleton(Video);
export { newVideo as Video };
main.js
import { Video } from "./video.js";
const v1 = new Video();
const v2 = new Video();
console.log(v1 === v2);
控制台输出
观察到这种实现下，构造函数只被调用了一次，并且v1和v2指向同一个实例。
缺点：
main.js
Video.prototype.play = function(){
console.log("play");
}
v1.play(); // Uncaught TypeError: v1.play is not a function
在这个案例中，我们试图在Video的原型上添加一个方法，并通过实例对象v1调用，但是v1所处的原型链上并不能找到这个方法。
再回过头来观察singleton.js的实现：
export function singleton(className){
let ins;
return class{
constructor(...args) {
if(!ins){
ins = new className(...args);
}
return ins;
}
};
}
- 在
main.js中，我们使用的Video类来自于video.js的导出，实际上已经是经过singleton函数改造的类，也就是上面这段代码中，return class {}这个匿名类。 - 而对于
v1或v2，它们来自于ins这个实例对象，它由上面这段代码的new className()创建，也就是说它来自于最“简单”的、没有经过单例化的那个Video类。 - 综上，
v1并不是由那个匿名类创建的，所以它们不在同一原型链上。这也是这种单例模式实现方式的缺点，需要改进。
方法4：使用代理
这个方法是对方法3的改进，使用Proxy API对类进行代理，往新的类的原型上添加方法，也会被添加到原来的类的原型上，由此解决了方法3的缺点。
singleton.js
export function singleton(className){
let ins;
return new Proxy(className, {
construct(target, ...args){
if(!ins){
ins = new target(...args);
}
return ins;
}
});
}
MDN对于
Proxy中construct更详细的介绍：handler.construct() - JavaScript | MDN (mozilla.org)
这里的constuct主要是拦截外部的new操作，函数参数target指向代理对象，也就是这里的className，即需要被单例化的类。
其它逻辑和方法3一致，使用闭包，通过ins存储实例对象。
video.js
import { singleton } from "./singleton.js";
class Video{
constructor() {
console.log("video created");
}
}
const newVideo = singleton(Video);
export { newVideo as Video };
main.js
import { Video } from "./video.js";
const v1 = new Video();
const v2 = new Video();
console.log(v1 === v2);
Video.prototype.play = function(){
console.log("play");
}
v1.play();
控制台输出
观察到构造函数只被调用了一次，并且在单例化的新类的原型上添加方法，实例对象v1也可以访问到。
这是因为newVideo是对Video的代理（这里的命名以video.js为准），在newVideo对象上的操作会被应用在Video这个对象上。文章来源：https://www.toymoban.com/news/detail-760029.html
至此，完成了JS中较为完善的单例模式实现。文章来源地址https://www.toymoban.com/news/detail-760029.html
到了这里，关于[JS] JS单例模式的实现的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
