前端面试准备——js实现单例模式

最新推荐文章于 2023-04-30 11:15:57 发布
最新推荐文章于 2023-04-30 11:15:57 发布
阅读量102 收藏
点赞数
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45721030/article/details/123353339
版权

参考了大佬的文章https://www.jb51.net/article/212634.htm

  • 单例模式：系统中只保存一个实例，并提供一个访问它的全局访问点
  • 实现单例模式的核心思想：当构造时，先判断是不是有此类的实例存在，如果存在，则直接返回此实例，不存在就创建这个实例

具体方法

  1. 使用instanceof判断是否使用了new关键字调用
  2. 在函数上直接添加方法属性调用生成实例
  3. 使用闭包
  4. 使用包装对象结合闭包的形式实现
  5. 在构造函数中使用new.target判断是否使用了new关键字
  6. 使用static静态方法

关于1

 

关于3

关于5

关于6

这个6应该是最简洁最好理解的方法 

 

 

lemonanaaa
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端JS单例模式
qq_25800235的博客
01-26 180
单例模式 优点：节约资源，控制入口 缺点：拓展困难，不可职责过重 // 单例模式类 var Single = (function(){ var instance; function init(){ return { command: function(){} } } return { getInstance: function(){ if(!instance){ ...
js实现单例模式
yimawujiang的博客
03-27 1156
let SingleObj = (function() { let instance return function() { if(instance) { return instance } else { this.name = "Join" instance = this } } }()) obj = new SingleObj() console.log(...
面试官：请简单实现一个Js单例模式（一看吓一跳，easy）
高大志leo的博客
11-19 1249
单例模式：顾名思义，即一个类只有一个实例，通常的做法是先判断类是否已存在实例，如果不存在，那就创建一个新的实例，如果已经存在，就直接使用已存在的实例。 涉及到的知识点：JavaScript 类、闭包。 新建一个简单的类 Person class Person { constructor(name){ //构造函数，创建实例的时候执行 this.name = name } showName(){ console.log('my name is',this.name)
js单例模式
Kenom_的博客
04-30 1225
单例模式是一种设计模式，它保证了一个类只有唯一的实例，并且提供了一个全局的访问点。在JavaScript中，单例模式经常被用来管理全局变量、缓存、日志等场景。实现单例模式的方式有很多种，下面我们详细介绍几种实现方式。
2022前端面试系列——Vue面试题.pdf
12-14
Vue.js采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter和getter，在数据变动时发布消息给订阅者，触发相应的监听回调。主要分为以下几个步骤：需要observe的数据对象...
C#窗口实现单例模式的方法
09-03
本文介绍了C#窗口实现单例模式的方法，对于一个软件如果第二次打开程序，就把已经启动的那个进程的窗口放到最前端显示,需要了解的朋友可以参考下
前端面试相关-前端常见设计模式
最新发布
01-08
前端设计模式是在前端开发中常用的一些设计思想或者编程范式，它们旨在解决特定的问题，并提供了一种可复用的解决方案。设计模式可以使代码更加可维护、可扩展，并促使开发者编写更清晰、更高效的代码。
JS前端面试必备——基本排序算法原理与实现方法详解【插入/选择/归并/冒泡/快速排序】
10-15
主要介绍了JS前端面试基本排序算法原理与实现方法,结合实例形式详细分析了JS常见的基本排序算法相关原理、实现方法、时间复杂度及操作注意事项,需要的朋友可以参考下
面试之单例模式
hbyh632的博客
10-23 419
###定义 保证一个类仅有一个实例，并提供一个访问它的全局访问点。 Singleton:负责创建Singleton类自己的唯一实例，并提供一个getInstance的方法，让外部来访问这个类的唯一实例。 饿汉式： private static Singleton uniqueInstance = new Singleton(); 懒汉式 private sta
javascript实现单例模式
weixin_40918145的博客
02-07 1697
什么是单例模式 单:单一, 一个 例:实例 所谓的单例, 就是指一个类只有一个实例, 不管你 new 多少次, 都是这一个实例 具体的实现思路就是: 先判断实例是否存在 如果存在则直接将实例返回 如果不存在, 就创建了再返回 先看一个普通的实例化 function Person() { this.name = '猫' } const p1 = new Person() const p2 = new Person() console.log(p1, p2); console...
设计模式(2)[JS版]---JavaScript如何实现单例模式？
AlbertYang的博客
07-19 2768
目录 1 什么是单例模式？ 2单例模式的作用和注意事项 3代码实现 4案例应用 4.1 使用单例模式管理命名空间 4.2 使用单例模式为不同命名空间的button按钮添加click事件，并且使他们之间能够互相通信 1 什么是单例模式？ 单例就是保证一个类只有一个实例，实现的方法一般是先判断实例存在与否，如果 存在直接返回，如果不存在就创建了再返回，这就确保了一个类只有一个实例对象。 在JavaScript里，单例作为一个命名空间提供者，从全局命名空间里提供一个唯一 的访问点来访...
单例模式的实现及其演变
js_tengzi的博客
05-12 303
单例模式的实现及其演变前言单例模式的结构演变1、饿汉式单例2、懒汉式单例类与双重检查锁定3、使用静态内部类实现单例模式 前言 单例模式是结构最简单的设计模式，在它的核心结构中只包含一个被称为单例类的特殊类。 作为一种目标明确、结构简单、理解容易的设计模式，在软件开发中的使用频率相当高，在很多应用软件和框架中都得以广泛应用。 单例模式的结构 单例模式的结构图如下： 其Java代码实现如下： pub...
js设计模式之单例模式
楠姐的博客
11-09 7514
单例模式也称为单体模式，保证一个类仅有一个实例，并提供一个访问它的全局访问点
JavaScript实现单例模式
weixin_49759035的博客
03-31 939
单例模式是一种创建型设计模式，它保证一个类只有一个实例，并提供一个全局访问点来访问该实例。在 JavaScript 中，实现单例模式有多种方式。本文将介绍几种常见的实现方式，并解释每种实现方式的思路和示例代码。
实现js的单例模式
weixin_68750962的博客
02-17 427
在JavaScript中，可以通过创建一个具有私有属性和方法的对象来实现单例模式。如果已经存在，则直接返回该实例。这样可以确保在整个应用程序中只有一个实例存在。在这个示例中，我们使用了一个自执行函数来创建一个闭包，该闭包包含了一个私有变量。方法返回一个包含公共方法和属性的对象，其中包括一个获取单例实例的方法。方法时，它首先检查单例实例是否已经存在。方法来创建一个新的实例，并将其存储在。在这个示例中，我们还可以通过访问。来访问单例对象的公共方法和属性。
【前端基础】ES6模块与单例模式
qq_42146383的博客
03-10 1584
使用type=“module"属性的<script>html标签会告诉浏览器相关执行的代码是模块代码。 模块代码可以直接嵌入在网页中，也可以作为外部文件引入： <script type="module"> // 模块代码 </script> <!-- 或者 --> <script type="module" src="path/to/myModule.js"></script> 注意：解析到<script type="modu
js单例模式及应用场景
Liu_Jun_Tao的博客
07-27 6022
单例模式 单例就是保证一个类只有一个实例，实现方法一般是先判断实例存在与否，如果存在直接返回，如果不存在就创建了再返回，这就确保了一个类只有一个实例对象。在JavaScript里，单例作为一个命名空间提供者，从全局命名空间里提供一个唯一的访问点来访问该对象。 单例模式的思路： 一个类能返回一个对象的引用（并且永远是同一个）和一个获得该实例的方法（静态方法，通常使用 getInstance 名...
JS Class单例模式
04-04
JS Class单例模式是一种设计模式，它确保一个类只有一个实例，并提供了一个全局访问点来访问该实例。 在JS中，可以通过使用类的静态属性和方法来实现单例模式。静态属性和方法只能在类本身上调用，而不是在实例上调用。通过静态属性和方法，我们可以确保只有一个实例被创建，并且可以全局访问该实例。 下面是一个使用JS Class实现单例模式的示例： ```javascript class Singleton { static instance; constructor() { if (!Singleton.instance) { Singleton.instance = this; } return Singleton.instance; } sayHello() { console.log("Hello World!"); } } const instance1 = new Singleton(); const instance2 = new Singleton(); console.log(instance1 === instance2); // true instance1.sayHello(); // "Hello World!" instance2.sayHello(); // "Hello World!" ``` 在上面的示例中，我们定义了一个名为Singleton的类，该类具有一个静态属性instance和一个构造函数。构造函数检查是否已经有一个实例存在，如果不存在，则创建一个新实例并将其分配给instance属性。否则，返回现有实例。 我们创建了两个Singleton实例instance1和instance2，并检查它们是否相等。由于使用了单例模式，它们是相等的。 最后，我们调用实例的sayHello方法，它将输出“Hello World！”到控制台。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值