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 相关文章推荐
JavaScript 图片预览效果 推荐
Dec 22 Javascript
JavaScript之Getters和Setters 平台支持等详细介绍
Dec 07 Javascript
js 获取坐标 通过JS得到当前焦点(鼠标)的坐标属性
Jan 04 Javascript
js之onload事件的一点使用心得
Aug 14 Javascript
如何解决谷歌浏览器下jquery无法获取图片的尺寸
Sep 10 Javascript
实例详解jQuery Mockjax 插件模拟 Ajax 请求
Jan 12 Javascript
JSON与String互转的实现方法(Javascript)
Sep 27 Javascript
利用jquery实现下拉框的禁用与启用
Dec 07 Javascript
详解webpack import()动态加载模块踩坑
Jul 17 Javascript
jQuery实现为动态添加的元素绑定事件实例分析
Sep 07 jQuery
在vue中动态添加class类进行显示隐藏实例
Nov 09 Javascript
JavaScript实现PC端横向轮播图
Feb 07 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
人工智能开始玩《星际争霸2》 你的操作跟得上吗?
2017/08/11 星际争霸
php读取javascript设置的cookies的代码
2010/04/12 PHP
php函数array_merge用法一例(合并同类数组)
2013/02/03 PHP
2014年10个最佳的PHP图像操作库
2014/07/14 PHP
jquery动态调整div大小使其宽度始终为浏览器宽度
2014/06/06 Javascript
JavaScript实现俄罗斯方块游戏过程分析及源码分享
2015/03/23 Javascript
jquery中ajax跨域方法实例分析
2015/12/18 Javascript
jquery封装插件时匿名函数形参和实参的写法解释
2017/02/14 Javascript
js简单实现网页换肤功能
2017/04/07 Javascript
bootstrap fileinput组件整合Springmvc上传图片到本地磁盘
2017/05/11 Javascript
AngularJs定时器$interval 和 $timeout详解
2017/05/25 Javascript
浅谈 Vue v-model指令的实现原理
2017/06/08 Javascript
Node.js静态服务器的实现方法
2018/02/28 Javascript
Vue.js 实现微信公众号菜单编辑器功能(二)
2018/05/08 Javascript
Vuex 使用及简单实例(计数器)
2018/08/29 Javascript
小程序中canvas的drawImage方法参数使用详解
2019/07/04 Javascript
Python3操作SQL Server数据库(实例讲解)
2017/10/21 Python
TensorFlow深度学习之卷积神经网络CNN
2018/03/09 Python
对Python3中的print函数以及与python2的对比分析
2018/05/02 Python
selenium3+python3环境搭建教程图解
2018/12/07 Python
python 在屏幕上逐字显示一行字的实例
2018/12/24 Python
python钉钉机器人运维脚本监控实例
2019/02/20 Python
linux环境中没有网络怎么下载python
2019/07/07 Python
python实现桌面气泡提示功能
2019/07/29 Python
Python FTP文件定时自动下载实现过程解析
2019/11/12 Python
Python range与enumerate函数区别解析
2020/02/28 Python
浅谈Pycharm的项目文件名是红色的原因及解决方式
2020/06/01 Python
基于Python正确读取资源文件
2020/09/14 Python
Python tkinter实现日期选择器
2021/02/22 Python
HTML5中FileReader接口使用方法实例详解
2017/08/26 HTML / CSS
VisionPros美国站:加拿大在线隐形眼镜和眼镜零售商
2020/02/11 全球购物
爱我中华演讲稿
2014/05/20 职场文书
如何签定毕业生就业协议书
2014/09/28 职场文书
领导班子“四风问题”“整改方案
2014/10/02 职场文书
2014年心理健康教育工作总结
2014/12/06 职场文书
盗窃案辩护词
2015/05/21 职场文书