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 相关文章推荐
jQuery拖动图片删除示例
May 10 Javascript
如何使Chrome控制台支持多行js模式——意外发现
Jun 13 Javascript
webapp框架AngularUI的demo改造之路
Dec 21 Javascript
jquery实现两边飘浮可关闭的对联广告
Nov 27 Javascript
js表单中选择框值的获取及表单的序列化
Dec 17 Javascript
JavaScript定时器实现的原理分析
Dec 06 Javascript
浅谈javascript中的事件冒泡和事件捕获
Dec 28 Javascript
Vue中fragment.js使用方法详解
Mar 09 Javascript
php结合js实现多条件组合查询
May 28 Javascript
layui实现数据表格隐藏列的示例
Oct 25 Javascript
JS实现点餐自动选择框(案例分析)
Dec 10 Javascript
node.js制作一个简单的登录拦截器
Feb 10 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导入导出excel实例
2013/10/25 PHP
2014年最新推荐的10款 PHP 开发框架
2014/08/01 PHP
PHP统计数值数组中出现频率最多的10个数字的方法
2015/04/20 PHP
php安装扩展mysqli的实现步骤及报错解决办法
2017/09/23 PHP
js 强制弹出窗口代码研究-又一款代码
2010/03/20 Javascript
JavaScript XML和string相互转化实现代码
2011/07/04 Javascript
Javascript浅谈之引用类型
2013/12/18 Javascript
javascript顺序加载图片的方法
2015/07/18 Javascript
JavaScript动态创建form表单并提交的实现方法
2015/12/10 Javascript
JS iFrame加载慢怎么解决
2016/05/13 Javascript
AngularJs验证重复密码的方法(两种)
2016/11/25 Javascript
让微信小程序支持ES6中Promise特性的方法详解
2017/06/13 Javascript
基于对象合并功能的实现示例
2017/10/10 Javascript
Vue Element 分组+多选+可搜索Select选择器实现示例
2018/07/23 Javascript
深入理解JS中Number(),parseInt(),parseFloat()三者比较
2018/08/24 Javascript
Node.js之删除文件夹(含递归删除)代码实例
2019/09/09 Javascript
el-form 多层级表单的实现示例
2020/09/10 Javascript
[03:42]2014DOTA2国际邀请赛 第三日比赛排位扑朔迷离
2014/07/12 DOTA
深入讲解Python中面向对象编程的相关知识
2015/05/25 Python
Python3数据库操作包pymysql的操作方法
2018/07/16 Python
Python单元测试unittest的具体使用示例
2018/12/17 Python
Python实现二叉树的最小深度的两种方法
2019/09/30 Python
Python读取csv文件实例解析
2019/12/30 Python
python使用re模块爬取豆瓣Top250电影
2020/10/20 Python
CSS3教程(6):创建网站多列
2009/04/02 HTML / CSS
CSS3中利用animation属性创建雪花飘落特效
2014/05/14 HTML / CSS
Baby Tulai澳大利亚:美国婴儿背带品牌
2018/10/15 全球购物
早读迟到检讨书
2014/01/24 职场文书
公司请假条格式
2014/04/11 职场文书
2014年法院工作总结
2014/11/24 职场文书
2015年敬老月活动总结
2015/03/27 职场文书
中学教师师德师风承诺书
2015/04/28 职场文书
2015年安全生产月工作总结
2015/07/27 职场文书
会议承办单位欢迎词
2015/09/30 职场文书
详解Redis主从复制实践
2021/05/19 Redis
浅谈JavaScript作用域
2021/12/06 Javascript