javascript 单例模式详解及简单实例


Posted in Javascript onFebruary 14, 2017

JS 单例模式

概要:

单例指一个类只有一个实例,这个类自行创建这个实例。

利用对象字面量直接生成一个单例:

var singleton = {
  prop: 1,
  method: function(){
    console.log(a);  //1
  }
}

严格的说对象字面量可能不算单例模式,生成单例是对象字面量的作用(已经被封装),而单例模式是一个设计模式(需要自行构思或设计)。

在类内部用new生成实例的单例模式:

var instance;
var foo = function(){
  if(!instance){
    instance = new Singleton();
  }
  return instance;
  function Singleton(){
    this.name = 'single';
    this.method = function(){
      console.log(this.name);
    }
  };
}
 
var a = foo();
var b = foo();
a.method();       //single
console.log(a === b);  //true

单例模式只要检测一个实例是否被生成。假如没有实例,则生成实例。假如已经生成则返回这个实例。保证这个类只有这一个实例。

由于hoisting,函数会提前声明,所以 singleton 函数放在哪都没所谓,但是每次调用都会声明函数singleton,可能会不够优雅。

由于new关键字是执行函数,同时this指向这个对象,所以可以判断类的this是否赋值给instance:

var instance;
var Singleton = function(){
  if(instance){
    return instance;
  }
  instance = this;
  this.name = 'single';
  this.method = function(){
    console.log(this.name);
  }
}
 
var a = new Singleton();
var b = new Singleton();
a.method();       //single
console.log(a === b);  //true

这个例子中,把instance指向了Singleton这个类,然后在类外部通过new来实例化,和上例中的new异曲同工。由于是通过修改this来达到检测是否执行过Singleton类,所以个人感觉不够语义化。

 上面的例子用es6重构的写法。

类内部new生成单例:

var instance;
class foo{
  static Singleton(){
    if(!instance){
      instance = new foo();
    }
    return instance;
  }  
  method(){
    this.name = 'single';
    console.log(this.name);
  }
}
 
var a = foo.Singleton();
var b = foo.Singleton();
a.method();       //single
console.log(a === b);  //true

修改this指向生成单例:

var instance;
class foo{
  constructor(){
    if(!instance){
      this.Singleton();
    }
    return instance;
  }
  Singleton(){
    instance = this;
    this.name = 'single';
    this.method = function(){
      console.log(this.name);
    }
  }
}
 
var a = new foo();
var b = new foo();
a.method();       //single
console.log(a === b);  //true

当然除了这两种以外还有别的方式能实例化一个单例。

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
读jQuery之九 一些瑕疵说明
Jun 21 Javascript
JavaScript中检查对象property的存在性方法介绍
Dec 30 Javascript
jquery实现的缩略图预览滑块实例
Jun 25 Javascript
js滚动条平滑移动示例代码
Mar 29 Javascript
BOM系列第三篇之定时器应用(时钟、倒计时、秒表和闹钟)
Aug 17 Javascript
详解js中call与apply关键字的作用
Nov 21 Javascript
详解jQuery中的事件
Dec 14 Javascript
详解Python中logging日志模块在多进程环境下的使用
Dec 26 Javascript
简单谈谈Javascript函数中的arguments
Feb 09 Javascript
nuxt框架中路由鉴权之Koa和Session的用法
May 09 Javascript
javascript实现前端input密码输入强度验证
Jun 24 Javascript
vue 解决IOS10低版本白屏的问题
Nov 17 Javascript
bootstrap 下拉多选框进行多选传值问题代码分析
Feb 14 #Javascript
微信小程序 弹幕功能简单实例
Feb 14 #Javascript
详解JavaScript中js对象与JSON格式字符串的相互转换
Feb 14 #Javascript
微信小程序 Nginx环境配置详细介绍
Feb 14 #Javascript
用file标签实现多图文件上传预览
Feb 14 #Javascript
利用策略模式与装饰模式扩展JavaScript表单验证功能
Feb 14 #Javascript
javascript中BOM基础知识总结
Feb 14 #Javascript
You might like
PHP 手机归属地查询 api
2010/02/08 PHP
使用php shell命令合并图片的代码
2011/06/23 PHP
phpcms模块开发之swfupload的使用介绍
2013/04/28 PHP
ThinkPHP整合datatables实现服务端分页的示例代码
2018/02/10 PHP
Yii2语言国际化的配置教程
2018/08/19 PHP
同一页面多个商品倒计时JS 基于面向对象的javascript
2012/02/16 Javascript
javascript操作JSON的要领总结
2012/12/09 Javascript
javascript中call和apply方法浅谈
2013/09/27 Javascript
无闪烁更新网页内容JS实现
2013/12/19 Javascript
JavaScript实现iframe自动高度调整和不同主域名跨域
2016/02/27 Javascript
js实现添加可信站点、修改activex安全设置,禁用弹出窗口阻止程序
2016/08/17 Javascript
jQuery.uploadify文件上传组件实例讲解
2016/09/23 Javascript
浅谈vue中使用图片懒加载vue-lazyload插件详细指南
2017/10/23 Javascript
vue内置组件transition简单原理图文详解(小结)
2018/07/12 Javascript
原生JS实现$.param() 函数的方法
2018/08/10 Javascript
微信小程序实现锚点功能
2019/11/20 Javascript
Vue.js 无限滚动列表性能优化方案
2019/12/02 Javascript
JS写滑稽笑脸运动效果
2020/05/28 Javascript
Python  pip安装lxml出错的问题解决办法
2017/02/10 Python
Python+Wordpress制作小说站
2017/04/14 Python
对pandas中两种数据类型Series和DataFrame的区别详解
2018/11/12 Python
python 多进程共享全局变量之Manager()详解
2019/08/15 Python
Python中输入和输出(打印)数据实例方法
2019/10/13 Python
使用 Python 处理3万多条数据只要几秒钟
2020/01/19 Python
python实现井字棋小游戏
2020/03/04 Python
Python如何实现远程方法调用
2020/08/07 Python
Python+unittest+DDT实现数据驱动测试
2020/11/30 Python
jupyter notebook指定启动目录的方法
2021/03/02 Python
CSS3教程(2):网页边框半径和网页圆角
2009/04/02 HTML / CSS
html5的新增的标签和废除的标签简要概述
2013/02/20 HTML / CSS
沃尔玛加拿大:Walmart.ca
2020/03/02 全球购物
企业群众路线教育实践活动心得体会
2014/11/03 职场文书
感恩教师主题班会
2015/08/12 职场文书
Python爬虫之爬取某文库文档数据
2021/04/21 Python
MyBatis-Plus 批量插入数据的操作方法
2021/09/25 Java/Android
Nginx速查手册及常见问题
2022/04/07 Servers