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 prototype 格式化数字 By shawl.qiu
Apr 02 Javascript
JavaScript学习笔记(二) js对象
Oct 25 Javascript
JavaScript高级程序设计 读书笔记之九 本地对象Array
Feb 27 Javascript
在浏览器窗口上添加遮罩层的方法
Nov 12 Javascript
Js如何判断客户端是PC还是手持设备简单分析
Nov 22 Javascript
Javascript中各种trim的实现详细解析
Dec 10 Javascript
基于jQuery全屏焦点图左右切换插件responsiveslides
Sep 07 Javascript
jquery把int类型转换成字符串类型的方法
Oct 07 Javascript
JavaScript实现左右下拉框动态增删示例
Mar 09 Javascript
如何使用webpack打包一个库library的方法步骤
Dec 18 Javascript
js实现飞机大战小游戏
Aug 26 Javascript
使用react-virtualized实现图片动态高度长列表的问题
May 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
PHP字符过滤函数去除字符串最后一个逗号(rtrim)
2013/03/26 PHP
解析将多维数组转换为支持curl提交的一维数组格式
2013/07/08 PHP
一个比较不错的PHP日历类分享
2014/11/18 PHP
Linux系统中为php添加pcntl扩展
2016/08/28 PHP
JQuery-tableDnD 拖拽的基本使用介绍
2013/07/04 Javascript
nodejs实现黑名单中间件设计
2014/06/17 NodeJs
js实现照片墙功能实例
2015/02/05 Javascript
深入解读JavaScript中的Iterator和for-of循环
2015/07/28 Javascript
JavaScript判断用户名和密码不能为空的实现代码
2016/05/16 Javascript
原生js实现ajax方法(超简单)
2016/09/20 Javascript
nodejs个人博客开发第五步 分配数据
2017/04/12 NodeJs
promise处理多个相互依赖的异步请求(实例讲解)
2017/08/03 Javascript
JS与HTML结合实现流程进度展示条思路详解
2017/09/03 Javascript
Vue 中文本内容超出规定行数后展开收起的处理的实现方法
2019/04/28 Javascript
关于vue项目中搜索节流的实现代码
2019/09/17 Javascript
Javascript Dom元素获取和添加详解
2019/09/24 Javascript
[50:20]DOTA2上海特级锦标赛主赛事日 - 5 总决赛Liquid VS Secret第四局
2016/03/06 DOTA
Python实现程序的单一实例用法分析
2015/06/03 Python
python实现冒泡排序算法的两种方法
2018/03/10 Python
基于python3的socket聊天编程
2020/02/17 Python
python中wx模块的具体使用方法
2020/05/15 Python
opencv-python的RGB与BGR互转方式
2020/06/02 Python
浅析Python面向对象编程
2020/07/10 Python
Python 开发工具通过 agent 代理使用的方法
2020/09/27 Python
html5 桌面提醒:Notifycations应用介绍
2012/11/27 HTML / CSS
Ariat官网:美国马靴和服装品牌
2019/12/16 全球购物
个人思想理论学习的自我鉴定
2013/11/30 职场文书
家长写给孩子的评语
2014/04/18 职场文书
旷课检讨书范文
2014/10/30 职场文书
公司承诺函范文
2015/01/21 职场文书
异地恋情人节寄语
2015/02/28 职场文书
裁员通知
2015/04/25 职场文书
欠款起诉书范文
2015/05/19 职场文书
2015年小学二年级班主任工作总结
2015/05/21 职场文书
慰问信(范文3篇)
2019/10/23 职场文书
Python并发编程实例教程之线程的玩法
2021/06/20 Python