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 相关文章推荐
写入cookie的JavaScript代码库 cookieLibrary.js
Oct 24 Javascript
制作高质量的JQuery Plugin 插件的方法
Apr 20 Javascript
JavaScript中的this关键字介绍与使用实例
Jun 21 Javascript
自定义百度分享的分享按钮
Mar 18 Javascript
js仿支付宝多方框输入支付密码效果
Sep 27 Javascript
js中string和number类型互转换技巧(分享)
Nov 28 Javascript
Node.js中用D3.js的方法示例
Jan 16 Javascript
vue-cli如何添加less 以及sass
Jul 06 Javascript
解决vue中无法动态修改jqgrid组件 url地址的问题
Mar 01 Javascript
JavaScript基础之静态方法和实例方法分析
Dec 26 Javascript
jQuery实现动态加载(按需加载)javascript文件的方法分析
May 31 jQuery
Vue2.0 $set()的正确使用详解
Jul 28 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
在Windows版的PHP中使用ADO
2006/10/09 PHP
php和mysql中uft-8中文编码乱码的几种解决办法
2012/04/19 PHP
php开启openssl的方法
2014/05/15 PHP
thinkphp框架表单数组实现图片批量上传功能示例
2020/04/04 PHP
js类后台管理菜单类-MenuSwitch
2007/09/12 Javascript
各情景下元素宽高的获取实现代码
2011/09/13 Javascript
js中Math之random,round,ceil,floor的用法总结
2013/12/26 Javascript
JavaScript中子对象访问父对象的方式详解
2016/09/01 Javascript
bootstrap fileinput完整实例分享
2016/11/08 Javascript
Jquery Easyui对话框组件Dialog使用详解(14)
2016/12/19 Javascript
老生常谈js-react组件生命周期
2017/05/02 Javascript
vue中如何实现变量和字符串拼接
2017/06/19 Javascript
Angular resolve基础用法详解
2018/10/03 Javascript
使用element-ui +Vue 解决 table 里包含表单验证的问题
2020/07/17 Javascript
如何检测JavaScript中的死循环示例详解
2020/08/30 Javascript
[04:13]2014DOTA2国际邀请赛 专访DC目前形势不容乐观
2014/07/12 DOTA
[01:01]2020完美高校联赛(秋)西安落幕
2021/03/11 DOTA
python逐行读取文件内容的三种方法
2014/01/20 Python
Python中使用Queue和Condition进行线程同步的方法
2016/01/19 Python
python文件操作相关知识点总结整理
2016/02/22 Python
python opencv 批量改变图片的尺寸大小的方法
2019/06/28 Python
Tensorflow训练模型越来越慢的2种解决方案
2020/02/07 Python
python基于socket函数实现端口扫描
2020/05/28 Python
python 实现围棋游戏(纯tkinter gui)
2020/11/13 Python
python爬虫中url管理器去重操作实例
2020/11/30 Python
Origins加拿大官网:雅诗兰黛集团高端植物护肤品牌
2017/11/19 全球购物
物业保安员岗位职责
2014/03/14 职场文书
小学五年级学生评语
2014/04/22 职场文书
三方协议书范本
2014/04/22 职场文书
男性健康日的活动方案
2014/08/18 职场文书
师范生见习报告
2014/10/31 职场文书
晚自修旷课检讨书怎么写
2014/11/17 职场文书
2014三年级班主任工作总结
2014/12/05 职场文书
民事申诉状范本
2015/05/20 职场文书
Windows下用Nginx配置https服务器及反向代理的问题
2021/09/25 Servers
docker 制作mysql镜像并自动安装
2022/05/20 Servers