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作一个通用向导说明
Aug 30 Javascript
jQuery操作Select的Option上下移动及移除添加等等
Nov 18 Javascript
node.js中的fs.readFile方法使用说明
Dec 15 Javascript
使用js复制链接中的部分文字的方法
Jul 30 Javascript
分享自己用JS做的扫雷小游戏
Feb 17 Javascript
jQuery获取复选框被选中数量及判断选择值的方法详解
May 25 Javascript
微信小程序 网络请求(post请求,get请求)
Jan 17 Javascript
原生js实现放大镜
Feb 20 Javascript
Angular组件化管理实现方法分析
Mar 17 Javascript
vue实现多组关键词对应高亮显示功能
Jul 25 Javascript
JS如何实现在弹出窗口中加载页面
Dec 03 Javascript
JavaScript实现点击自制菜单效果
Feb 02 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
一个连接两个不同MYSQL数据库的PHP程序
2006/10/09 PHP
PHP程序漏洞产生的原因分析与防范方法说明
2014/03/06 PHP
php使用ZipArchive提示Fatal error: Class ZipArchive not found in的解决方法
2014/11/04 PHP
php简单分页类实现方法
2015/02/26 PHP
又十个超级有用的PHP代码片段
2015/09/24 PHP
适合PHP初学者阅读的4本经典书籍
2016/09/23 PHP
Yii2框架中使用PHPExcel导出Excel文件的示例
2017/08/09 PHP
php+js实现的无刷新下载文件功能示例
2019/08/23 PHP
在Javascript中为String对象添加trim,ltrim,rtrim方法
2006/09/22 Javascript
js chrome浏览器判断代码
2010/03/28 Javascript
Javascript中的变量使用说明
2010/05/18 Javascript
JS trim去空格的最佳实践
2011/10/30 Javascript
js URL参数的拼接方法比较
2012/02/15 Javascript
Javascript拓展String方法小结
2013/07/08 Javascript
jquery索引在使用中的一些困惑
2013/10/24 Javascript
原生js获取宽高与jquery获取宽高的方法关系对比
2014/04/04 Javascript
jquery.hotkeys监听键盘按下事件keydown插件
2014/05/11 Javascript
jQuery中each()方法用法实例
2014/12/27 Javascript
JavaScript数据结构与算法之栈详解
2015/03/12 Javascript
js实现延迟加载的方法
2015/06/24 Javascript
javascript实现继承的简单实例
2015/07/26 Javascript
jQuery如何解决IE输入框不能输入的问题
2016/10/08 Javascript
vue 解决uglifyjs-webpack-plugin打包出现报错的问题
2020/08/04 Javascript
python3学生名片管理v2.0版
2018/11/29 Python
python实现多进程通信实例分析
2019/09/01 Python
Python函数参数定义及传递方式解析
2020/06/10 Python
python使用requests库爬取拉勾网招聘信息的实现
2020/11/20 Python
Html5写一个简单的俄罗斯方块小游戏
2019/12/03 HTML / CSS
美国时尚女装在线:Missguided
2016/12/03 全球购物
如何将无状态会话Bean发布为WEB服务,只有无状态会话Bean可以发布为WEB服务?
2015/12/03 面试题
实习护士自我鉴定
2013/10/13 职场文书
银行学习十八大感想
2014/01/11 职场文书
公司年会抽奖活动主持词
2014/03/31 职场文书
影视广告专业求职信
2014/09/02 职场文书
股东大会通知
2015/04/24 职场文书
python自动计算图像数据集的RGB均值
2021/06/18 Python