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 相关文章推荐
Ext 表单布局实例代码
Apr 30 Javascript
iphone safari不支持position fixed的解决方法
May 04 Javascript
tangram框架响应式加载图片方法
Nov 21 Javascript
用jQuery模拟select下拉框的简单示例代码
Jan 26 Javascript
js实现文字跟随鼠标移动而移动的方法
Feb 28 Javascript
jQuery根据name属性进行查找的用法分析
Jun 23 Javascript
轻松掌握JavaScript享元模式
Aug 27 Javascript
微信小程序实战之上拉(分页加载)效果(2)
Apr 17 Javascript
Vue基于NUXT的SSR详解
Oct 24 Javascript
微信小程序常用简易小函数总结
Feb 01 Javascript
jQuery实现form表单基于ajax无刷新提交方法实例代码
Nov 04 jQuery
小程序中设置缓存过期的实现方法
Jan 14 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
PHP4实际应用经验篇(3)
2006/10/09 PHP
一步一步学习PHP(6) 面向对象
2010/02/16 PHP
php数组函数序列之array_push() 数组尾部添加一个或多个元素(入栈),返回新长度。
2011/11/07 PHP
laravel框架查询数据集转为数组的两种方法
2019/10/10 PHP
如何在Laravel5.8中正确地应用Repository设计模式
2019/11/26 PHP
JS 常用校验函数
2009/03/26 Javascript
ExtJS 2.0 GridPanel基本表格简明教程
2010/05/25 Javascript
Whatever:hover 无需javascript让IE支持丰富伪类
2010/06/29 Javascript
jquery 读取页面load get post ajax 四种方式代码写法
2011/04/02 Javascript
Jquery实现点击切换图片并隐藏显示内容(2种方法实现)
2013/04/11 Javascript
js取消单选按钮选中示例代码
2013/11/14 Javascript
js Array操作的最简短最容易理解方法
2013/12/09 Javascript
js仿百度贴吧验证码特效实例代码
2014/01/16 Javascript
超链接的禁用属性Disabled使用示例
2014/07/31 Javascript
javascript实现根据iphone屏幕方向调用不同样式表的方法
2015/07/13 Javascript
实例详解ECMAScript5中新增的Array方法
2016/04/05 Javascript
如何选择适合你的JavaScript框架
2017/11/20 Javascript
vue单个组件实现无限层级多选菜单功能
2018/04/10 Javascript
TypeScript基础入门教程之三重斜线指令详解
2018/10/22 Javascript
Python利用IPython提高开发效率
2016/08/10 Python
利用python实现命令行有道词典的方法示例
2017/01/31 Python
解决Python一行输出不显示的问题
2018/12/03 Python
python 5个实用的技巧
2020/09/27 Python
用gpu训练好的神经网络,用tensorflow-cpu跑出错的原因及解决方案
2021/03/03 Python
HTML5中div、article、section的区别及使用介绍
2013/08/14 HTML / CSS
英国领先的汽车轮胎和快速健康中心:Kwik Fit
2017/10/29 全球购物
美国著名的户外用品品牌:L.L.Bean
2018/01/05 全球购物
英文版网络工程师求职信
2013/10/28 职场文书
高一自我鉴定
2013/12/17 职场文书
机械专业求职信
2014/05/25 职场文书
解除劳动合同通知书范本
2015/04/16 职场文书
绿色环保倡议书
2015/04/28 职场文书
Nginx 过滤静态资源文件的访问日志的实现
2021/03/31 Servers
python数据库批量插入数据的实现(executemany的使用)
2021/04/30 Python
matlab xlabel位置的设置方式
2021/05/21 Python
详解MindSpore自定义模型损失函数
2021/06/30 Python