单例模式之es3与es6双版本（设计模式）

岳光发布于2019-08-22 15:57 / 3314人阅读

摘要：单例模式是一种重要的设计模式，有些对象我们只需要创建一个，比如浏览器的对象，模态对话框。普通类负责实现基本功能，代理类管理单例。

定义

保证一个类仅有以一个实例，仅能被实例化/创建一次，并提供全局的访问点。

单例模式是一种重要的设计模式，有些对象我们只需要创建一个，比如浏览器的window对象，模态对话框。实现这种设计模式其实很简单，最重要的是在创建实例的时候，用一个标记变量判断实例是否已经创建。

普通青年写法

function Singleton(name){
    this.name = name;
    this.instance = null;
}
Singleton.prototype.getName = function(){
    console.log("name: " + this.name);
    return this.name;
}
Singleton.getInstance = function(name){
    if(!this.instance){
        this.instance = new Singleton(name);
    }
    return this.instance;
}
var a = Singleton.getInstance("a");
var b = Singleton.getInstance("b");
alert(a === b);

点评：
该写法不透明，使用者必须知道用Singleton.getInstance获取单例，而非通过更加通用的方法new xxx方式。

老司机写法

var CreateDiv = function(html){
    this.html = html;
    this.init();
}
CreateDiv.prototype.init = function(){
    var div = document.createElement("div");
    div.innerHTML = this.html;
    document.body.appendChild(div);
}
var SingletonDiv = (function(){
    var instance;
    return function(html){
        if(!instance){
            instance = new CreateDiv(html);
        }
        return instance;
    }
})()
var a = SingletonDiv("yyh");
var b = SingletonDiv("yyh1");

点评：
使用代理类+普通的类，使得职责分明。普通类负责实现基本功能，代理类管理单例。CreateDiv可以直接生产一个实例，而加上代理，可以实现单例。有木有一种模块拼凑的快感，这就实现了低耦合。

华丽丽的ES6

在ES6中，可以使用static方法代替闭包存储单例。

静态方法的单例模式

class Singleton {
    constructor(name) {
        this.name = name;
    }
    static getInstance(name) {
        if(!Singleton.instance) {
            Singleton.instance = new Singleton(name)
        }
        return Singleton.instance;
    }
    getName() {
        return this.name;
    }
}
const singletonA = Singleton.getInstance("yyh1");
const singletonB = Singleton.getInstance("yyh2");
console.log(singletonA === singletonB);
console.log(singletonA.getName() === singletonB.getName());

点评：ES6的静态方法，和闭包一样能在减少全局变量污染的同时，使标记变量更加长久的保存在内存中不被回收。

老司机的新技能（更加通用的实现方式）

// 负责创建DIV的基本功能
class CreateDiv {
    constructor(html) {
        this.html = html;
        this.init();
    }
    init() {
        const div = document.createElement("div");
        div.innerHTML = this.html;
        document.body.appendChild(div);
    }
}
// 负责管理单例
class ProxysingletonCreateDiv {
    constructor(htmlStr) {
        return ProxysingletonCreateDiv.getInstance(htmlStr);
    }
    static getInstance(name) {
        if(!ProxysingletonCreateDiv.instance) {
            ProxysingletonCreateDiv.instance = new CreateDiv(name)
        }
        return ProxysingletonCreateDiv.instance;
    }
}
const singletonC = new ProxysingletonCreateDiv("yyh1");
const singletonD = new ProxysingletonCreateDiv("yyh2");
console.log(singletonC === singletonD);
singletonC.init();
singletonD.init();

云服务器 GPU云服务器单例模式单例模式实现单例模式总结 pdo单例模式

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/93910.html

面试官问：能否模拟实现JS的call和apply方法

摘要：之前写过两篇面试官问能否模拟实现的操作符和面试官问能否模拟实现的方法其中模拟方法时是使用的和修改指向。但面试官可能问能否不用和来实现呢。使用模拟实现的浏览器环境非严格模式方法的属性是。之前写过两篇《面试官问：能否模拟实现JS的new操作符》和《面试官问：能否模拟实现JS的bind方法》其中模拟bind方法时是使用的call和apply修改this指向。但面试官可能问：能否不用cal...

wuyangnju 2019-08-23 13:48 评论0 收藏0
ES3/5模拟实现ES6块级作用域方式探究

摘要：其中就包括定义块级作用域的关键字块级作用域如何用低版本模拟如何用低版本模拟加强版如何用低版本模拟自调用函数版简述在JavaScript编程中,当我们使用关键字var时，该变量是在距离最近的函数内部或是在全局词法环境中定义的，即函数作用域。这是JavaScript由来已久的特性，{}并不一定限制变量作用域的模式也困扰了许多从其他语言转向JavaScript的开发者。随着前端工程的发展...

2bdenny 2019-08-26 10:42 评论0 收藏0
你不知道的JavaScript（ES6与之未来）

摘要：然而，临近规范发布时，有建议提及未来的版本号切换为编年制，比如用同来指代在年末前被定稿的所有版本。总得来说就是版本号不再那么重要了，开始变得更像一个万古长青的活标准。你不知道的JS（下卷）ES6与之未来第一章：ES的今与明在你想深入这本书之前，你应该对（在读此书时）JavaScript的最近标准掌握熟练，也就是ES5（专业来说是ES 5.1）。在此，我们决定全方面地谈论关于将近的...

Julylovin 2019-08-20 16:41 评论0 收藏0
双十二大前端工程师读书清单

摘要：本文最早为双十一而作，原标题双大前端工程师读书清单，以付费的形式发布在上。发布完本次预告后，捕捉到了一个友善的吐槽读书清单也要收费。这本书便从的异步编程讲起，帮助我们设计快速响应的网络应用，而非简单的页面。本文最早为双十一而作，原标题双 11 大前端工程师读书清单，以付费的形式发布在 GitChat 上。发布之后在读者圈群聊中和读者进行了深入的交流，现免费分享到这里，不足之处欢迎指教...

happen 2019-08-02 16:00 评论0 收藏0
双十二大前端工程师读书清单

摘要：本文最早为双十一而作，原标题双大前端工程师读书清单，以付费的形式发布在上。发布完本次预告后，捕捉到了一个友善的吐槽读书清单也要收费。这本书便从的异步编程讲起，帮助我们设计快速响应的网络应用，而非简单的页面。本文最早为双十一而作，原标题双 11 大前端工程师读书清单，以付费的形式发布在 GitChat 上。发布之后在读者圈群聊中和读者进行了深入的交流，现免费分享到这里，不足之处欢迎指教...

余学文 2019-08-22 11:14 评论0 收藏0