单例指一个类只有一个实例,这个类自行创建这个实例。

利用对象字面量直接生成一个单例:

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

  

当然除了这两种以外还有别的方式能实例化一个单例。

js 单例模式笔记的更多相关文章

  1. js学习笔记:webpack基础入门(一)

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  2. Vue.js学习笔记(2)vue-router

    vue中vue-router的使用:

  3. js读书笔记

    js读书笔记 基本类型的基本函数总结 1. Boolean() 数据类型 转换为true的值 转换为false的值 Boolean true false String 任何非空字符串 "&q ...

  4. React.js入门笔记

    # React.js入门笔记 核心提示 这是本人学习react.js的第一篇入门笔记,估计也会是该系列涵盖内容最多的笔记,主要内容来自英文官方文档的快速上手部分和阮一峰博客教程.当然,还有我自己尝试的 ...

  5. JS 学习笔记--9---变量-作用域-内存相关

    JS 中变量和其它语言中变量最大的区别就是,JS 是松散型语言,决定了它只是在某一个特定时间保存某一特定的值的一个名字而已.由于在定义变量的时候不需要显示规定必须保存某种类型的值,故变量的值以及保存的 ...

  6. node.js系列笔记之node.js初识《一》

    node.js系列笔记之node.js初识<一> 一:环境说明 1.1 Linux系统CentOS 5.8 1.2 nodejs v0.10.15 1.3 nodejs源码下载地址 htt ...

  7. JS面向对象笔记二

    菜单导航,<JS面向对象笔记一>,  参考书籍:阮一峰之<JavaScript标准参考教程> 一.构造函数和new命令 二.this关键字 三.构造函数和new命令 四.构造函 ...

  8. WebGL three.js学习笔记 使用粒子系统模拟时空隧道(虫洞)

    WebGL three.js学习笔记 使用粒子系统模拟时空隧道 本例的运行结果如图: 时空隧道demo演示 Demo地址:https://nsytsqdtn.github.io/demo/sprite ...

  9. WebGL three.js学习笔记 法向量网格材质MeshNormalMaterial的介绍和创建360度全景天空盒的方法

    WebGL学习----Three.js学习笔记(5) 点击查看demo演示 Demo地址:https://nsytsqdtn.github.io/demo/360/360 简单网格材质 MeshNor ...

随机推荐

  1. Java语言程序设计(基础篇)第二章

    第二章 基本程序设计 2.2 编写简单的程序 1.变量名尽量选择描述性的名字(descriptive name). 2.实数(即带小数点的数字)在计算机中使用一种浮点的方法来表示.因此,实数也称为浮点 ...

  2. jqGird 学习记录

    jqGrid使用记录 Jqgrid教程(简单上手) jqGrid基本用法与示例 jqGrid中文教程(精品) $(document).ready(function () { $("#grid ...

  3. [Git] Ubuntu 升级 git 版本

    $ sudo add-apt-repository ppa:git-core/ppa $ sudo apt-get update $ sudo apt-get install git

  4. Linux中可用于管道操作的命令总结

    在Linux中药进行稍复杂的操作,通常需要借助管道命令"|"多个命令的组合,形式如下: command 1 |  command 2 |  command 3 -- 在linux中 ...

  5. C++之路进阶codevs1242(布局)

    1242 布局 2005年USACO  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 黄金 Gold    <:section class="hbox" ...

  6. Cassandra数据类型:

    Cassandra在CQL语言层面支持多种数据类型[12]. CQL类型 对应Java类型 描述 ascii String ascii字符串 bigint long 64位整数 blob ByteBu ...

  7. VIM 常用快捷键

    一,光标移动 大家不要觉得光标移动不重要,其实它是基础,更好的光标移动,复制,粘贴,删除等才能更加的得心应手,进入了编辑器里面后,鼠标就不能用了. 光标移动 h 或 向左箭头键(←) 20h或者20( ...

  8. XP 安装Oralce 10g 数据库

    今天使用XP新建一个新数据库,下面是自己的操作方法, 电脑版本型号:Microsoft Windows XP Professional 版本 2002 Service Pack 3 Oracle版本型 ...

  9. python实现汉诺塔

    经典递归算法汉诺塔分析: 当A柱子只有1个盘子,直接A --> C 当A柱子上有3个盘子,A上第一个盘子 --> B, A上最后一个盘子 --> C, B上所有盘子(1个) --&g ...

  10. mysql大数据分表后查询

    当数据量猛增的时候,大家都会选择库表散列等等方式去优化数据读写速度,举例说明: 1亿条数据,分100张表 1.首先创建100张表 $i=0;while($i<=99){echo "$n ...