【Javascript】单例模式

最新推荐文章于 2024-02-09 15:20:54 发布

王昱潇

最新推荐文章于 2024-02-09 15:20:54 发布

阅读量122

点赞数

分类专栏：前端学习笔记文章标签： javascript 设计模式

本文链接：https://blog.csdn.net/qs52955339/article/details/115616743

版权

前端同时被 2 个专栏收录

40 篇文章 1 订阅

订阅专栏

学习笔记

36 篇文章 0 订阅

订阅专栏

定义：只有一个实例；提供全局的一个访问点。

解决的问题：一个全局使用的类，频繁的创建和销毁。

何时使用：当你想控制实例的数目，节省系统化资源的时候。

如何实现：判断系统是否已经有这个单例，如果有则返回，没有则创建。

单例模式的优点：内存中只有一个实例，减少了内存的开销，尤其是频繁的创建和销毁实例。

使用场景： 全局的缓存；弹窗。

注：ES5实现单例模式依靠闭包，ES6实现单例模式可使用类。

ES5 实现单例模式

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ES5单例模式</title>
</head>
<body>
  <button id="button">登陆</button>
  <script>
    var getSingle = function (fn) {
      var result
      return function (){
        return result || (result = fn.apply(this, arguments))
      }
    }

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

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

ES6 实现单例模式

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ES6单例模式</title>
</head>
<body>
  <script>
    class Person {
      constructor(name, sex) {
        this.name = name
        this. sex = sex
      }
      static getInstance(name, sex) {
        if(!this.instance) {
          this.instance = new Person(name, sex)
        }
        return this.instance
      }
    }

    let p1 = Person.getInstance('小张', '女')
    let p2 = Person.getInstance('小李', '男')
    //预期结果 true
    console.log(p1===p2)
  </script>
</body>
</html>

以上仅为个人学习使用。

王昱潇

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【Javascript】单例模式

定义：只有一个实例；提供全局的一个访问点。解决的问题：一个全局使用的类，频繁的创建和销毁。何时使用：当你想控制实例的数目，节省系统化资源的时候。如何实现：判断系统是否已经有这个单例，如果有则返回，没有则创建。单例模式的优点：内存中只有一个实例，减少了内存的开销，尤其是频繁的创建和销毁实例。使用场景：全局的缓存；弹窗。注：ES5实现单例模式依靠闭包，ES6实现单例模式可使用类。ES5 实现单例模式<!DOCTYPE html><html><.
复制链接

扫一扫