美文网首页
[js设计模式]----单例设计模式

[js设计模式]----单例设计模式

作者: hello_web_Front | 来源:发表于2019-08-10 13:18 被阅读0次

分享一下今天在bilibili上学习了冰山工作室老师说的js单例模式,所以写了一个笔记,如果有什么不对的地方,还请多指教

什么是单例设计模式

单表示一个,例表示实例,所以单例设计模式指的就是只创建一个实例
其实说白了就是 无论你new多少次,都只创建一个实例对象

先来看一个简单的单例代码:

 var instance;
        function SingleInstance(content) {
            this.init(content)
            // 判断instance存不存在,如果存在则返回,如果不存在则把当前实例赋值给instance
            return instance ? instance : (instance = this);
        }
        SingleInstance.prototype.init = function (content) {
            this.content = content;
        }
        var foo = new SingleInstance('foo');
        console.log(foo.content); // foo
        var bar = new SingleInstance('bar');
        console.log(bar.content); // foo
        console.log(foo == bar);  // true

其实上面的代码以及形成了一个单例,我们可以观察出foo==bar,说明无论你创建new多少次都只创建一个实例

下面对单例的代码进行改善

我们发现 foo.content 和bar.content都是foo
当第一次new的时候instance不存在,实例化了一次,当再次new的时候时直接return instance的
所以我们修改成instance调用

var instance;
        function SingleInstance(content){
            if(!instance){
                instance = this;
            }
            instance.init(content);
            return  instance;
        }
        SingleInstance.prototype.init = function(content){
            this.content = content;
        }

继续优化:细心的同学肯定发现了instance定义在全局中,这样容易造成全局的污染
这里使用闭包使其改善成局部变量

我们将代码嵌套在匿名函数的自调用中
let SingleInstance = (function () {
            var instance;
            function SingleInstance(content) {
                // 判断instance存不存在,如果存在则返回,如果不存在则把当前实例赋值给instance
                if (!instance) {
                    instance = this;
                }
                instance.init(content);
                return instance;
            }
            SingleInstance.prototype.init = function(content){
                this.content = content;
            }
            return SingleInstance;
        })();

继续优化

如果我们在外部不使用new的方式创建呢
var foo = SingleInstance('foo'); // 这里的this就不指向SingleInstance了,调用init就会报错
对this进行判断

 let SingleInstance = (function () {
                    var instance;
                    function SingleInstance(content) {
                        instance = instance?instance:(this instanceof SingleInstance?this:new SingleInstance(content));
                        instance.init(content);
                        return instance;
                    }
                    SingleInstance.prototype.init = function (content) {
                        this.content = content;
                    }
                    return SingleInstance;
                })();

                  var foo = SingleInstance('foo');
                console.log(foo.content);
                var bar = SingleInstance('bar');
                console.log(bar.content);
                console.log(foo==bar);// true

到此以及单例的最终版本了,使用了闭包,也实现了类名函数直接调用

总结:单例是我们面向对象编程设计的一种模式,始终遵循只创建一个对象的原则,单例一般用在网页中的单矿,因为弹框一般都只弹一次

相关文章

  • 前端设计模式

    JS设计模式一:工厂模式jS设计模式二:单例模式JS设计模式三:模块模式JS设计模式四:代理模式JS设计模式五:职...

  • 单例模式Java篇

    单例设计模式- 饿汉式 单例设计模式 - 懒汉式 单例设计模式 - 懒汉式 - 多线程并发 单例设计模式 - 懒汉...

  • python中OOP的单例

    目录 单例设计模式 __new__ 方法 Python 中的单例 01. 单例设计模式 设计模式设计模式 是 前人...

  • 单例

    目标 单例设计模式 __new__ 方法 Python 中的单例 01. 单例设计模式 设计模式设计模式 是 前人...

  • 设计模式

    常用的设计模式有,单例设计模式、观察者设计模式、工厂设计模式、装饰设计模式、代理设计模式,模板设计模式等等。 单例...

  • python 单例

    仅用学习参考 目标 单例设计模式 __new__ 方法 Python 中的单例 01. 单例设计模式 设计模式设计...

  • 设计模式之单例模式

    单例设计模式全解析 在学习设计模式时,单例设计模式应该是学习的第一个设计模式,单例设计模式也是“公认”最简单的设计...

  • 2、创建型设计模式-单例设计模式

    江湖传言里的设计模式-单例设计模式 简介:什么是单例设计模式和应用 备注:面试重点考查 单例设计模式:这个是最简单...

  • 设计模式第二篇、单例设计模式

    目录1、什么是单例设计模式2、单例设计模式的简单实现3、单例设计模式面临的两个问题及其完整实现4、单例设计模式的应...

  • 单例模式

    JAVA设计模式之单例模式 十种常用的设计模式 概念: java中单例模式是一种常见的设计模式,单例模式的写法...

网友评论

      本文标题:[js设计模式]----单例设计模式

      本文链接:https://www.haomeiwen.com/subject/cbxrjctx.html