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 相关文章推荐
js获取html参数及向swf传递参数应用介绍
Feb 18 Javascript
div+css+js实现无缝滚动类似marquee无缝滚动兼容firefox
Aug 29 Javascript
js实现编辑div节点名称的方法
Dec 17 Javascript
在JavaScript中处理时间之setMinutes()方法的使用
Jun 11 Javascript
基于jquery实现导航菜单高亮显示(两种方法)
Aug 23 Javascript
利用js编写网页进度条效果
Oct 08 Javascript
cordova入门基础教程及使用中遇到的一些问题总结
Nov 14 Javascript
使用Vue如何写一个双向数据绑定(面试常见)
Apr 20 Javascript
浅谈angular表单提交中ng-submit的默认使用方法
Sep 30 Javascript
微信小程序判断用户是否需要再次授权获取个人信息
Jul 18 Javascript
在微信小程序中渲染HTML内容3种解决方案及分析与问题解决
Jan 12 Javascript
vue实现移动端input上传视频、音频
Aug 18 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
extjs ColumnChart设置不同的颜色实现代码
2013/05/17 Javascript
JS中的异常处理方法分享
2013/12/22 Javascript
js禁止回车提交表单的示例代码
2013/12/23 Javascript
浅谈javascript 函数属性和方法
2015/01/21 Javascript
JavaScript获取按钮所在form表单id的方法
2015/04/02 Javascript
JavaScript中用sort()方法对数组元素进行排序的操作
2015/06/09 Javascript
javascript 动态修改css样式方法汇总(四种方法)
2015/08/27 Javascript
javascript实现tab切换的四种方法
2015/11/05 Javascript
jquery实现下拉框功能效果【实例代码】
2016/05/06 Javascript
jQuery实现的多张图无缝滚动效果【测试可用】
2016/09/12 Javascript
webpack配置的最佳实践分享
2017/04/21 Javascript
Vue中对iframe实现keep alive无刷新的方法
2019/07/23 Javascript
UEditor 自定义图片视频尺寸校验功能的实现代码
2020/10/20 Javascript
Python Tkinter GUI编程入门介绍
2015/03/10 Python
python学习数据结构实例代码
2015/05/11 Python
简述Python中的进程、线程、协程
2016/03/18 Python
Python+树莓派+YOLO打造一款人工智能照相机
2018/01/02 Python
tensorflow实现加载mnist数据集
2018/09/08 Python
Python3爬虫学习之爬虫利器Beautiful Soup用法分析
2018/12/12 Python
python实现字符串加密 生成唯一固定长度字符串
2019/03/22 Python
在Qt中正确的设置窗体的背景图片的几种方法总结
2019/06/19 Python
python 通过视频url获取视频的宽高方式
2019/12/10 Python
python 解决函数返回return的问题
2020/12/05 Python
教你一分钟在win10终端成功安装Pytorch的方法步骤
2021/01/28 Python
python快速安装OpenCV的步骤记录
2021/02/22 Python
StubHub中国:购买和出售全球活动门票
2020/01/01 全球购物
英语感恩演讲稿
2014/01/14 职场文书
干部现实表现材料
2014/02/13 职场文书
大学生两会精神学习心得体会
2014/03/10 职场文书
婚礼答谢宴主持词
2014/03/14 职场文书
贯彻学习两会心得体会范文
2014/03/17 职场文书
大学生创业计划书
2014/08/14 职场文书
学校领导班子成员查摆问题及整改措施
2014/10/28 职场文书
南湾猴岛导游词
2015/02/09 职场文书
2015年办公室工作总结范文
2015/03/31 职场文书
2016年班主任培训心得体会
2016/01/07 职场文书