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 组件之旅(三):用 Ant 构建组件
Oct 28 Javascript
IE event.srcElement和FF event.target 功能比较
Mar 01 Javascript
jquery.validate使用攻略 第五步 正则验证
Jul 01 Javascript
基于jquery的仿百度搜索框效果代码
Apr 11 Javascript
jquery选择器之内容过滤选择器详解
Jan 27 Javascript
jQuery实现提示密码强度的代码
Jul 15 Javascript
JavaScript实现下拉菜单的显示和隐藏
Jan 05 Javascript
使用pcs api往免费的百度网盘上传下载文件的方法
Mar 17 Javascript
asp.net+jquery.form实现图片异步上传的方法(附jquery.form.js下载)
May 05 Javascript
解析JavaScript中的字符串类型与字符编码支持
Jun 24 Javascript
vue 和vue-touch 实现移动端左右导航效果(仿京东移动站导航)
Apr 22 Javascript
基于vue-cli、elementUI的Vue超简单入门小例子(推荐)
Apr 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
PHP调用Webservice实例代码
2011/07/29 PHP
『PHP』PHP截断函数mb_substr()使用介绍
2013/04/22 PHP
php实现的mongodb操作类
2015/05/28 PHP
Symfony2安装的方法(2种方法)
2016/02/04 PHP
php单例模式的简单实现方法
2016/06/10 PHP
详解使用php调用微信接口上传永久素材
2017/04/11 PHP
PHP7扩展开发教程之Hello World实现方法示例
2017/08/03 PHP
PHP的mysqli_select_db()函数讲解
2019/01/23 PHP
JavaScript实现禁止后退的方法
2006/12/27 Javascript
js的onload事件及初始化按钮事件示例代码
2013/09/25 Javascript
Jquery获取元素的父容器对象示例代码
2014/02/10 Javascript
JsRender for object语法简介
2014/10/31 Javascript
浅谈Unicode与JavaScript的发展史
2015/01/19 Javascript
JavaScript中用于生成随机数的Math.random()方法
2015/06/15 Javascript
JavaScript编写简单的计算器
2015/11/25 Javascript
非常棒的jQuery图片轮播效果
2016/04/17 Javascript
Vue项目服务器部署之子目录部署方法
2019/05/12 Javascript
如何基于jQuery实现五角星评分
2020/09/02 jQuery
vue单应用在ios系统中实现微信分享功能操作
2020/09/07 Javascript
vue实现图书管理系统
2020/12/29 Vue.js
Python是编译运行的验证方法
2015/01/30 Python
numpy数组拼接简单示例
2017/12/15 Python
Django中的Signal代码详解
2018/02/05 Python
pytorch: tensor类型的构建与相互转换实例
2018/07/26 Python
Python使用matplotlib 模块scatter方法画散点图示例
2019/09/27 Python
numpy np.newaxis 的实用分享
2019/11/30 Python
Python+MySQL随机试卷及答案生成程序的示例代码
2021/02/01 Python
Html5实现用户注册自动校验功能实例代码
2016/05/24 HTML / CSS
凌阳科技股份有限公司C++程序员面试题笔试题
2014/11/20 面试题
软件工程师岗位职责
2013/11/16 职场文书
四川成都导游欢迎词
2014/01/18 职场文书
关于运动会的广播稿(10篇)
2014/09/12 职场文书
离婚协议书范本(通用篇)
2014/11/30 职场文书
2016年庆祝六一儿童节活动总结
2016/04/06 职场文书
MySQL索引知识的一些小妙招总结
2021/05/10 MySQL
SpringCloud之@FeignClient()注解的使用方式
2021/09/25 Java/Android