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刷新页面的实现代码(局部及全页面刷新)
Jul 11 Javascript
js判断滚动条是否已到页面最底部或顶部实例
Nov 20 Javascript
javascript截取字符串小结
Apr 28 Javascript
JavaScript对象学习小结
Sep 02 Javascript
Bootstrap每天必学之按钮(一)
Nov 24 Javascript
解决bootstrap导航栏navbar在IE8上存在缺陷的方法
Jul 01 Javascript
微信小程序中button组件的边框设置的实例详解
Sep 27 Javascript
vue.js删除列表中的一行
Jun 30 Javascript
video.js 实现视频只能后退不能快进的思路详解
Aug 09 Javascript
Vue组件之高德地图地址选择功能的实例代码
Jun 21 Javascript
js正则匹配多个全部数据问题
Dec 20 Javascript
关于vue3.0中的this.$router.replace({ path: '/'})刷新无效果问题
Jan 16 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
如何限制访问者的ip(PHPBB的代码)
2006/10/09 PHP
PHP OPCode缓存 APC详细介绍
2010/10/12 PHP
解析phpstorm + xdebug 远程断点调试
2013/06/20 PHP
php实现高效获取图片尺寸的方法
2014/12/12 PHP
php获取数组元素中头一个数组元素值的实现方法
2014/12/20 PHP
基于php判断客户端类型
2016/10/14 PHP
JS 文字符串转换unicode编码函数
2009/05/30 Javascript
JavaScript 保存数组到Cookie的代码
2010/04/14 Javascript
JavaScript获取鼠标移动时的坐标(兼容IE8、chome谷歌、Firefox)
2014/09/13 Javascript
JavaScript中字符串(string)转json的2种方法
2015/06/25 Javascript
JavaScript如何实现在文本框(密码框)输入提示语
2015/12/25 Javascript
浅析script标签中的defer与async属性
2016/11/30 Javascript
jQuery Mobile漏洞会有跨站脚本攻击风险
2017/02/12 Javascript
ES6新特性之数组、Math和扩展操作符用法示例
2017/04/01 Javascript
jQuery实现多张图片上传预览(不经过后端处理)
2017/04/29 jQuery
基于jquery实现左右上下移动效果
2018/05/02 jQuery
vue实现微信获取用户信息的方法
2019/03/21 Javascript
vue中的v-if和v-show的区别详解
2019/09/01 Javascript
微信小程序 导入图标实现过程详解
2019/10/11 Javascript
解决nuxt 自定义全局方法,全局属性,全局变量的问题
2020/11/05 Javascript
H5 js点击按钮复制文本到粘贴板
2020/11/19 Javascript
解决vue使用vant轮播组件swipe + flex时文字抖动问题
2021/01/07 Vue.js
Python对象中__del__方法起作用的条件详解
2018/11/01 Python
python getpass实现密文实例详解
2019/09/24 Python
Python类class参数self原理解析
2020/11/19 Python
解决selenium+Headless Chrome实现不弹出浏览器自动化登录的问题
2021/01/09 Python
全球领先的在线cosplay服装商店:RoleCosplay
2020/01/18 全球购物
在购买印度民族服饰:Soch
2020/09/15 全球购物
数据库笔试题
2013/05/09 面试题
什么情况下你必须要把一个类定义为abstract的
2013/01/06 面试题
护士节慰问信
2015/02/15 职场文书
工作犯错保证书
2015/05/11 职场文书
学校标语口号大全
2015/12/26 职场文书
2016年度农村党员干部主题教育活动总结
2016/04/06 职场文书
2019毕业典礼主持词!
2019/07/05 职场文书
MySQL三种方式实现递归查询
2022/04/18 MySQL