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中,为什么要尽可能使用局部变量?
Apr 06 Javascript
Javascript算符的优先级介绍
Mar 20 Javascript
基于jquery的文字向上跑动类似跑马灯的效果
Sep 22 Javascript
判断字符串的长度(优化版)中文占两个字符
Oct 30 Javascript
JavaScript使用指针操作实现约瑟夫问题实例
Apr 07 Javascript
JavaScript实现列表分页功能特效
May 15 Javascript
jQuery获取当前点击的对象元素(实现代码)
May 19 Javascript
前端图片懒加载(lazyload)的实现方法(提高用户体验)
Aug 21 Javascript
vue2.0 computed 计算list循环后累加值的实例
Mar 07 Javascript
微信小程序实现全局搜索代码高亮的示例
Mar 30 Javascript
小程序实现授权登陆的解决方案
Dec 02 Javascript
js脚本中执行java后台代码方法解析
Oct 11 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 无限极分类
2008/03/27 PHP
PHP 开发环境配置(测试开发环境)
2010/04/28 PHP
PHP中“简单工厂模式”实例代码讲解
2012/09/04 PHP
php导出word文档与excel电子表格的简单示例代码
2014/03/08 PHP
php 在线导入mysql大数据程序
2015/06/11 PHP
学习PHP session的传递方式
2016/06/15 PHP
Zend Framework基于Command命令行建立ZF项目的方法
2017/02/18 PHP
php 浮点数比较方法详解
2017/05/05 PHP
如何通过View::first使用Laravel Blade的动态模板详解
2017/09/21 PHP
JQuery Tips(2) 关于$()包装集你不知道的
2009/12/14 Javascript
jQuery validate 中文API 附validate.js中文api手册
2010/07/31 Javascript
javascript动画浅析
2012/08/30 Javascript
JavaScript实现的图像模糊算法代码分享
2014/04/22 Javascript
js中直接声明一个对象的方法
2014/08/10 Javascript
Javascript 拖拽雏形(逐行分析代码,让你轻松了拖拽的原理)
2015/01/23 Javascript
ES6中非常实用的新特性介绍
2016/03/10 Javascript
EasyUi combotree 实现动态加载树节点
2016/04/01 Javascript
Node.js环境下JavaScript实现单链表与双链表结构
2016/06/12 Javascript
Node.js 日志处理模块log4js
2016/08/28 Javascript
vue使用监听实现全选反选功能
2018/07/06 Javascript
JavaScript引用类型Date常见用法实例分析
2018/08/08 Javascript
jquery实现二级导航下拉菜单效果实例
2019/05/14 jQuery
详解基于Wepy开发小程序插件(推荐)
2019/08/01 Javascript
vue项目打包为APP,静态资源正常显示,但API请求不到数据的操作
2020/09/12 Javascript
pyside写ui界面入门示例
2014/01/22 Python
Python的mysql数据库的更新如何实现
2017/07/31 Python
python将视频转换为全字符视频
2019/04/26 Python
Python两台电脑实现TCP通信的方法示例
2019/05/06 Python
python发送多人邮件没有展示收件人问题的解决方法
2019/06/21 Python
会计主管岗位职责范文
2013/11/08 职场文书
中国文明网签名寄语
2014/01/18 职场文书
2014年社会实践活动总结范文
2014/04/29 职场文书
暑期培训班招生方案
2014/08/26 职场文书
解除劳动合同协议书(样本)
2014/10/02 职场文书
优秀教师先进事迹材料
2014/12/15 职场文书
MySQL 角色(role)功能介绍
2021/04/24 MySQL