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动态调用css属性的小规律及实例说明
Dec 28 Javascript
使用node.js 制作网站前台后台
Nov 13 Javascript
javascript实现简单的二级联动
Mar 19 Javascript
jQuery制作简洁的图片轮播效果
Apr 03 Javascript
Backbone.js的一些使用技巧
Jul 01 Javascript
CKEditor无法验证的解决方案(js验证+jQuery Validate验证)
May 09 Javascript
JS+CSS3实现超炫的散列画廊特效
Jul 16 Javascript
JavaScript仿百度图片浏览效果
Nov 23 Javascript
angularjs定时任务的设置与清除示例
Jun 02 Javascript
使用Bootrap和Vue实现仿百度搜索功能
Oct 26 Javascript
elementUI多选框反选的实现代码
Apr 03 Javascript
详解50行代码,Node爬虫练手项目
Apr 22 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
利用discuz自带通行证整合dedecms的方法以及文件下载
2007/03/06 PHP
Js判断CSS文件加载完毕的具体实现
2014/01/17 Javascript
浅析jQuery中调用ajax方法时在不同浏览器中遇到的问题
2014/06/11 Javascript
JS绘制生成花瓣效果的方法
2015/08/05 Javascript
jquery实现简单的banner轮播效果【实例】
2016/03/30 Javascript
微信小程序 wxapp内容组件 progress详细介绍
2016/10/31 Javascript
javascript中Number的方法小结
2016/11/21 Javascript
使用jsonp实现跨域获取数据实例讲解
2016/12/25 Javascript
Bootstrap 手风琴菜单的实现代码
2017/01/20 Javascript
bootstrap实现二级下拉菜单效果
2017/11/23 Javascript
vue解决使用$http获取数据时报错的问题
2019/10/30 Javascript
vuex 实现getter值赋值给vue组件里的data示例
2019/11/05 Javascript
小程序新版订阅消息模板消息
2019/12/31 Javascript
JS代码优化的8点建议
2020/02/04 Javascript
详解vue中v-on事件监听指令的基本用法
2020/07/22 Javascript
Python实现的批量下载RFC文档
2015/03/10 Python
Python 实现链表实例代码
2017/04/07 Python
python基于SMTP协议发送邮件
2019/05/31 Python
Python使用selenium + headless chrome获取网页内容的方法示例
2019/10/16 Python
Python银行系统实战源码
2019/10/25 Python
Python 2种方法求某个范围内的所有素数(质数)
2020/01/31 Python
Python用户自定义异常的实现
2020/12/25 Python
css3绘制天猫logo实现代码
2012/11/06 HTML / CSS
css图标制作教程制作云图标
2014/01/19 HTML / CSS
美国时尚在线:Showpo
2017/09/08 全球购物
NFL墨西哥官方商店:Tienda NFL
2017/11/28 全球购物
Python中如何定义一个函数
2016/09/06 面试题
一套英文Java笔试题面试题
2016/04/21 面试题
初中化学教学反思
2014/01/23 职场文书
团队精神口号
2014/06/06 职场文书
机电一体化专业求职信
2014/07/22 职场文书
家庭贫困证明范本(经典版)
2014/09/22 职场文书
限期整改通知书
2015/04/22 职场文书
公司要求试用期员工提交“述职报告”,该怎么写?
2019/07/17 职场文书
Android Studio实现简易进制转换计算器
2022/05/20 Java/Android
Win10玩csgo闪退如何解决?Win10玩csgo闪退的解决方法
2022/07/23 数码科技