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 编写规范
Mar 03 Javascript
JavaScript事件委托用法分析
Jan 24 Javascript
AngularJS基础学习笔记之指令
May 10 Javascript
js运动事件函数详解
Oct 21 Javascript
Angular.js自定义指令学习笔记实例
Feb 24 Javascript
vue实现全选和反选功能
Aug 31 Javascript
Web安全之XSS攻击与防御小结
Dec 13 Javascript
JavaScript闭包与作用域链实例分析
Jan 21 Javascript
详解微信小程序用定时器实现倒计时效果
Apr 30 Javascript
echarts统计x轴区间的数值实例代码详解
Jul 07 Javascript
ES6中let、const的区别及变量的解构赋值操作方法实例分析
Oct 15 Javascript
js实现随机点名程序
Sep 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
十大“创意”战术!
2020/03/04 星际争霸
PHP 判断常量,变量和函数是否存在
2009/04/26 PHP
第4章 数据处理-php正则表达式-郑阿奇(续)
2011/07/04 PHP
php解析字符串里所有URL地址的方法
2015/04/03 PHP
Centos PHP 扩展Xchche的安装教程
2016/07/09 PHP
基于PHP实现栈数据结构和括号匹配算法示例
2017/08/10 PHP
javascript中substr,substring,slice.splice的区别说明
2010/11/25 Javascript
jquery 跨域访问问题解决方法(笔记)
2011/06/08 Javascript
jquery中.add()的使用分析
2013/04/26 Javascript
js实现按钮控制图片360度翻转特效的方法
2015/02/17 Javascript
JQuery查找DOM节点的方法
2015/06/11 Javascript
Web前端开发工具——bower依赖包管理工具
2016/03/29 Javascript
很棒的一组js图片轮播特效
2017/01/12 Javascript
js实现动态显示时间效果
2017/03/06 Javascript
iOS + node.js使用Socket.IO框架进行实时通信示例
2017/04/14 Javascript
Vue中的Vux配置指南
2017/12/08 Javascript
Vue中自定义全局组件的实现方法
2017/12/08 Javascript
对angular 实时更新模板视图的方法$apply详解
2018/10/09 Javascript
vue组件之间通信实例总结(点赞功能)
2018/12/05 Javascript
Vue formData实现图片上传
2019/08/20 Javascript
vue项目实现图片上传功能
2019/12/23 Javascript
Vue 自适应高度表格的实现方法
2020/05/13 Javascript
windows及linux环境下永久修改pip镜像源的方法
2016/11/28 Python
Python实现登录接口的示例代码
2017/07/21 Python
详细分析python3的reduce函数
2017/12/05 Python
python 爬虫 批量获取代理ip的实例代码
2018/05/22 Python
解决Pycharm调用Turtle时 窗口一闪而过的问题
2019/02/16 Python
pygame实现成语填空游戏
2019/10/29 Python
如何基于python操作json文件获取内容
2019/12/24 Python
将自己的数据集制作成TFRecord格式教程
2020/02/17 Python
CSS3中的opacity属性使用教程
2015/08/19 HTML / CSS
英国最大的网上药品商店:Chemist Direct
2017/12/16 全球购物
两则小学生的自我评价分享
2013/11/14 职场文书
宣传工作经验材料
2014/06/02 职场文书
2016年度继续教育学习心得体会
2016/01/19 职场文书
Python进程池与进程锁之语法学习
2022/04/11 Python