# 单例模式

# 定义

定义

保证一个类仅有一个实例，并提供一个访问它的全局访问点。

单例模式是一种常用的模式，有一些对象我们往往只需要一个，比如线程池、全局缓存、浏览器中的 window 对象等。

# 实现单例模式

要实现一个标准的单例模式并不复杂，无非是用一个变量来标志当前是否已经为某个类创建过对象，如果是，则在下一次获取该类的实例时，直接返回之前创建的对象。代码如下：

var Singleton = function(name) {
  this.name = name;
  this.instance = null;
};

Singleton.prototype.getNamge = function() {
  return this.name;
};

Singleton.getInstance = function(name) {
  if (!this.instance) {
    this.instance = new Singleton(name);
  }
  return this.instance;
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

以上是 es6 之前的实现方式，也可以用 es6 代码实现：

class Singleton {
  constructor(name) {
    this.name = name;
    this.instance = null;
  }

  getNamge() {
    return this.name;
  }
}
Singleton.getInstance = function(name) {
  if (!this.instance) {
    this.instance = new Singleton(name);
  }
  return this.instance;
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

测试代码：

var a = Singleton.getInstance("a");
var b = Singleton.getInstance("b");
console.log(a === b); // true

1
2
3

# JavaScript 中的单例模式

前面的单例模式的实现，更多的是接近传统面向对象语言中的实现，单例对象从“类”中创建而来。在以类为中心的语言中，这是很自然的做法。比如在 Java 中，如果需要某个对象，就必须先定义一个类，对象总是从类中创建而来的。

但 JavaScript 其实是一门无类（class-free）语言，也正因为如此，生搬单例模式的概念并无意义。在 JavaScript 中创建对象的方法非常简单，既然我们只需要一个“唯一”的对象，为什么要为它先创建一个“类”呢？这无异于穿棉衣洗澡，传统的单例模式实现在 JavaScript 中并不适用。

单例模式的核心是确保只有一个实例，并提供全局访问。

全局变量不是单例模式，但在 JavaScript 开发中，我们经常会把全局变量当成单例来使用。例如：

var obj = {};

当用这种方式创建对象 obj 时，对象 obj 确实是独一无二的。如果 obj 变量被声明在全局作用域下，则我们可以在代码中的任何位置使用这个变量，全局变量提供给全局访问是理所当然的。这样就满足了单例模式的两个条件。

但是全局变量存在很多问题，它很容易造成命名空间污染。在大中型项目中，如果不加以限制和管理，程序中可能存在很多这样的变量。JavaScript 中的变量也很容易被不小心覆盖，相信每个 JavaScript 程序员都曾经历过变量冲突的痛苦，就像上面的对象 var obj = {}，随时有可能被别人覆盖。

提示

作为普通的开发者，我们有必要尽量减少全局变量的使用，即使需要，也要把它的污染降到最低。以下几种方式可以相对降低全局变量带来的命名污染。

使用命名空间

适当地使用命名空间，并不会杜绝全局变量，但可以减少全局变量的数量。最简单的方法依然是用对象字面量的方式：

var namespace1 = {
  a: function() {
    console.log(1);
  },
  b: function() {
    console.log(2);
  },
};

1
2
3
4
5
6
7
8

2．使用闭包封装私有变量

这种方法把一些变量封装在闭包的内部，只暴露一些接口跟外界通信：

var user = (function() {
  var _name = "JaxBBLL";
  var _age = 29;
  return {
    getUserInfo: function() {
      return _name + "-" + _age;
    },
  };
})();

1
2
3
4
5
6
7
8
9

我们用下划线来约定私有变量_name 和_age，它们被封装在闭包产生的作用域中，外部是访问不到这两个变量的，这就避免了对全局的命令污染。

# 惰性单例

惰性单例指的是在需要的时候才创建对象实例。惰性单例是单例模式的重点，这种技术在实际开发中非常有用，有用的程度可能超出了我们的想象，实际上在本章开头就使用过这种技术，instance 实例对象总是在我们调用 Singleton.getInstance 的时候才被创建，而不是在页面加载好的时候就创建，代码如下：

Singleton.getInstance = function(name) {
  if (!this.instance) {
    this.instance = new Singleton(name);
  }
  return this.instance;
};

1
2
3
4
5
6

不过这是基于“类”的单例模式，前面说过，基于“类”的单例模式在 JavaScript 中并不适用，下面我们将以登录浮窗为例，介绍与全局变量结合实现惰性的单例。

var createLoginLayer = (function() {
  var div;
  return function() {
    if (!div) {
      div = document.createElement("div");
      div.innerHTML = "我是登录浮窗";
      div.style.display = "none";
      document.body.appendChild(div);
    }
    return div;
  };
})();

document.getElementById("loginBtn").onclick = function() {
  var loginLayer = createLoginLayer();
  loginLayer.style.display = "block";
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# 通用的惰性单例

我们完成了一个可用的惰性单例，但是我们发现它还有如下一些问题。

这段代码仍然是违反单一职责原则的，创建对象和管理单例的逻辑都放在 createLoginLayer 对象内部。
如果我们下次需要创建页面中唯一的 iframe，或者 script 标签，用来跨域请求数据，就必须得如法炮制，把 createLoginLayer 函数几乎照抄一遍：

我们需要把不变的部分隔离出来，先不考虑创建一个 div 和创建一个 iframe 有多少差异，管理单例的逻辑其实是完全可以抽象出来的，这个逻辑始终是一样的：用一个变量来标志是否创建过对象，如果是，则在下次直接返回这个已经创建好的对象：

var obj;
if (!obj) {
  obj = xxx;
}

1
2
3
4

现在我们就把如何管理单例的逻辑从原来的代码中抽离出来，这些逻辑被封装在 getSingle 函数内部，创建对象的方法 fn 被当成参数动态传入 getSingle 函数：

var getSingle = function(fn) {
  var result;
  return function() {
    return result || (result = fn.applay(this, arguments));
  };
};

1
2
3
4
5
6

接下来将用于创建登录浮窗的方法用参数 fn 的形式传入 getSingle，我们不仅可以传入 createLoginLayer，还能传入 createScript、createIframe、createXhr 等。之后再让 getSingle 返回一个新的函数，并且用一个变量 result 来保存 fn 的计算结果。result 变量因为身在闭包中，它永远不会被销毁。在将来的请求中，如果 result 已经被赋值，那么它将返回这个值。代码如下：

var createLoginLayer = function() {
  var div = document.createElement("div");
  div.innerHTML = "我是登录浮窗";
  div.style.display = "none";
  document.body.appendChild(div);
  return div;
};

var createSingleLoginLayer = getSingle(createLoginLayer);

document.getElementById("loginBtn").onclick = function() {
  var loginLayer = createSingleLoginLayer();
  loginLayer.style.display = "block";
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14

# 小结

单例模式一般是我们学习的第一个模式，我们先学习了传统的单例模式实现，也了解到因为语言的差异性，有更适合的方法在 JavaScript 中创建单例。

在 getSinge 函数中，实际上也提到了闭包和高阶函数的概念。单例模式是一种简单但非常实用的模式，特别是惰性单例技术，在合适的时候才创建对象，并且只创建唯一的一个。更奇妙的是，创建对象和管理单例的职责被分布在两个不同的方法中，这两个方法组合起来才具有单例模式的威力

← 闭包装饰者模式 →