九、js闭包实现单例模式、es6单例模式（2021/4/25）

最新推荐文章于 2023-03-06 20:49:50 发布

叶川飞流

最新推荐文章于 2023-03-06 20:49:50 发布

阅读量252

点赞数

分类专栏：前端js面试题集锦记录

本文链接：https://blog.csdn.net/weixin_41033048/article/details/116148918

版权

前端js面试题集锦记录专栏收录该内容

36 篇文章 2 订阅

订阅专栏

#单例模式的理解

定义:

1.只有一个实例
2.可以全局的访问
主要解决:一个全局使用的类频繁的创建和销毁
何时使用:当你想控制实例的数目节省系统化资源的时候
如何实现:判断系统是否已经有这个单例如果有则返回没有则创建
单例模式优点:内存中只要一个实例·减少了内存的开销·尤其是频繁的创建和销毁实例(比如说是首页页面的缓存)
使用场景:
1.全局的缓存
2.弹窗

#es5 实现单例模式

第一种情况：加载完成的时候，已经创建好这个弹窗了，一开始是隐藏的状态
缺点：资源的浪费

<script>
        var loginLayer = (function(){  //变量声明的时候就把弹窗加载进页面了
                var div  = document.createElement('div');
                div.innerHTML = '我是登录的弹窗';
                div.style.display = 'none';
                document.body.appendChild(div)
                return div
        })()

        document.getElementById('button').onclick = function(){
                loginLayer.style.display = 'block';
        }
</script>

第二种情况：点击的时候创建
缺点：每一次点击都产生一个新的弹窗，频繁地创建


        var createLoginLayer = function(){  
                var div  = document.createElement('div');
                div.innerHTML = '我是登录的弹窗';
                div.style.display = 'none';
                document.body.appendChild(div)
                return div
        }

        document.getElementById('button').onclick = function(){
                var loginLayer = createLoginLayer();
                loginLayer.style.display = 'block';
        }
</script>

第三种情况：单例模式（判断这个系统是否有弹窗，有就返回，没有就创建）
要有一个标记在内存中 => 不能被销毁的标记：闭包

<script>
        var createLoginLayer = (function(){
                var div 
                return function(){
                        if(!div){
                                div  = document.createElement('div');
                                div.innerHTML = '我是登录的弹窗';
                                div.style.display = 'none';
                                document.body.appendChild(div)  
                        }
                        return div
                }
        })()
        document.getElementById('button').onclick = function(){
                var loginLayer = createLoginLayer();
                loginLayer.style.display = 'block';
        }
</script>

单一模式优化

<body>
        <button id="loginBtn">登录</button>
        <script>
                // 单例模式
                var createLogin = function(a,b,c){
                        console.log(a,b,c);
                        var div = document.createElement('div');
                        div.innerHTML = '我是登录的弹窗';
                        div.style.display = 'none';
                        document.body.appendChild(div)
                        return div
                }
                
                var getSingle = function(fn){
                        var result; //闭包保存单一变量
                        return function(){
                                return result || (result = fn.apply(this,arguments)) //如果有result就使用上次的内容，如果没有则执行有参数返回的回调函数
                        }
                }

                var create = getSingle(createLogin)

                document.getElementById('loginBtn').onclick = function (){
                        var loginLay = create(1,2,3);
                        loginLay.style.display = 'block';
                }
        </script>
</body>

es6单例模式

不需要用到闭包

引子：

es5 构造函数的写法

function Person(name,sex){
        this.name = name;
        this.sex = sex;
}
Person.prototype.say = function(){
        console.log('学前端');
}

let person1 = new Person('星空','男');
console.log(person1.name);
person1.say();

es6 的实现 (es5的语法糖)

class Person{
        constructor(name,sex){
                this.name = name;
                this.sex = sex;
        }
        say(){
                console.log('学前端');
        }
}
// 在这里会发现 方法虽然定义在里面，实则是定义在原型上的
let person1 = new Person('星空','男');
console.log(person1.name);
console.log(Person.prototype.say === person1.say) //true

静态方法 static

class Foo{
        static classMethod(){
                return 'hello'
        }
}

let foo = new Foo();
console.log(Foo.classMethod())
// console.log(foo.classMethod()) //static方法不允许实例调用

借助static 实现单例模式：

class LyEdu{
        constructor(name,creator,products){
                this.name = name;
                this.creator = creator;
                this.products = products;
        }
        static getInstance(name,creator,products){
                if(!this.instance){
                        this.instance = new LyEdu(name,creator,products); // 给LyEdu添加一个单一的属性instance
                }
                return this.instance;
        }
}

let lyCom = LyEdu.getInstance('零元教育','裴老师',['js','css','html']);
let lyCom2 = LyEdu.getInstance('零元教育2','裴老师2',['js2','css','html']);
console.log(lyCom === lyCom2)  // true 只能创建第一个生效

叶川飞流

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
九、js闭包实现单例模式、es6单例模式（2021/4/25）

<body> <button id="loginBtn">登录</button> <script> // 单例模式 var createLogin = function(a,b,c){ console.log(a,b,c); var div = document.crea
复制链接

扫一扫