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 31 Javascript
document.all的一个比较完整的总结及案例
Jan 31 Javascript
Javascript无阻塞加载具体方式
Jun 28 Javascript
子窗体与父窗体传值示例js代码
Aug 01 Javascript
简单的Jquery遮罩层代码实例
Nov 14 Javascript
jQuery获取动态生成的元素示例
Jun 15 Javascript
基于BootStrap环境写jQuery tabs插件
Jul 12 Javascript
BetterScroll 在移动端滚动场景的应用
Sep 18 Javascript
JS交互点击WKWebView中的图片实现预览效果
Jan 05 Javascript
vue 之 .sync 修饰符示例详解
Apr 21 Javascript
修改vue+webpack run build的路径方法
Sep 01 Javascript
JavaScript数组去重实现方法小结
Jan 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中文本数据翻页(留言本翻页)
2006/10/09 PHP
PHP中的integer类型使用分析
2010/07/27 PHP
php下foreach提示Warning:Invalid argument supplied for foreach()的解决方法
2014/11/11 PHP
PHP错误处理函数
2016/04/03 PHP
浅谈PHP的排列组合(如输入a,b,c 输出他们的全部组合)
2017/03/14 PHP
浅谈PHP面向对象之访问者模式+组合模式
2017/05/22 PHP
thinkphp框架page类与bootstrap分页(美化)
2017/06/25 PHP
ExtJS4中使用mixins实现多继承示例
2013/12/03 Javascript
使用focus方法让光标默认停留在INPUT框
2014/07/29 Javascript
js实现黑色简易的滑动门网页tab选项卡效果
2015/08/31 Javascript
jQuery与JavaScript节点创建方法的对比
2016/11/18 Javascript
Angularjs中三种数据的绑定策略(“@”,“=”,“&”)
2016/12/23 Javascript
JS实现一次性弹窗的方法【刷新后不弹出】
2016/12/26 Javascript
浅谈vue的props,data,computed变化对组件更新的影响
2018/01/16 Javascript
vue超时计算的组件实例代码
2018/07/09 Javascript
layer提示框添加多个按钮选择的实例
2019/09/12 Javascript
vue 微信分享回调iOS和安卓回调出现错误的解决
2020/09/07 Javascript
Python网页解析利器BeautifulSoup安装使用介绍
2015/03/17 Python
python多线程方式执行多个bat代码
2016/06/07 Python
python 安装virtualenv和virtualenvwrapper的方法
2017/01/13 Python
1分钟快速生成用于网页内容提取的xslt
2018/02/23 Python
python多进程下实现日志记录按时间分割
2019/07/22 Python
python Pandas如何对数据集随机抽样
2019/07/29 Python
PYQT5开启多个线程和窗口,多线程与多窗口的交互实例
2019/12/13 Python
python如何求圆的面积
2020/07/01 Python
CSS3绘制超炫的上下起伏波动进度加载动画
2016/04/21 HTML / CSS
html5基础标签(html5视频标签 html5新标签用法)
2013/12/30 HTML / CSS
EJB实例的生命周期
2016/10/28 面试题
班长竞选演讲稿
2014/04/24 职场文书
校庆口号
2014/06/20 职场文书
2015年六一儿童节活动方案
2015/05/05 职场文书
Django使用channels + websocket打造在线聊天室
2021/05/20 Python
浅析Python中的随机采样和概率分布
2021/12/06 Python
MySQL创建管理KEY分区
2022/04/13 MySQL
Ubuntu18.04下QT开发Android无法连接设备问题解决实现
2022/06/01 Java/Android
mysql实现将字符串字段转为数字排序或比大小
2022/06/14 MySQL