JavaScript Design Pattern Series 2: Singleton Pattern

This article shares with you the second series of JavaScript design patterns: singleton mode. Friends who are interested can take a look at

singleton mode

Foreword: The code of this series has been Upload to GitHub address https://github.com/HolyZheng/...

What is singleton mode?

Definition of singleton mode: A class has only one instance and can be accessed globally.
When do you need to use the singleton pattern? In fact, the singleton mode is widely used in daily development, such as various floating windows, such as login floating windows, etc. No matter how many times we click, it is the same floating window, and the floating window is only created once from beginning to end. This scenario is very suitable for using the singleton mode.

---

Code Implementation

We create a class of "the oldest person". Obviously, there is only one "oldest person". This is very consistent with the application scenario of our singleton model. Let's take a look at the complete code first:

var oldestMan = function (name) {
  this.name = name;
}

oldestMan.prototype.getName = function () {
  console.log(this.name);
}
//引入一个代理函数和闭包的概念
var createOldestMan = (function () {
  var instance;
  return function (name) {
      if (!instance) {
         instance = new oldestMan(name);
      }
      return instance;
  }
})();

var personA = createOldestMan("holz");
var personB = createOldestMan("Amy");
personA.getName();  //  holz
personB.getName();  //  holz

We can see on the console that even though createOldestMan is called twice and different values ​​are assigned, getName is not ()The output is all the first "holz". This is the singleton pattern.

Can’t understand the code? It doesn’t matter, I’ll explain it to you one by one now.
First we created an oldestMan class and created a name attribute. Then we add a getName() method to it through prototype to get the name of oldestMan. I believe everyone understands it here. Then the following piece of code is the focus, and it is also difficult to understand. Let’s take this piece of code out and look at it separately.

//引入一个代理函数和闭包的概念
var createOldestMan = (function () {
  var instance;
  return function (name) {
      if (!instance) {
         instance = new oldestMan(name);
      }
      return instance;
  }
})();

First of all, we don’t need to worry about what a proxy function is. The reason why it is called a proxy function is because it helps us achieve the effect of the singleton mode. The first key point of this function is createOldestMan() is an immediate execution function. The immediate function will be executed immediately when it is declared, that is, this function will be executed when createOldestMan is declared. It will declare an instance variable and then return a function to createOldestMan. createOldestMan is equivalent to:

var createOldestMan = function (name) {
      if (!instance) {
         instance = new oldestMan(name);
      }
      return instance;
  }

The second key point is: the concept of closure is used here.

What is closure? I just need to remember that a closure occurs when a function is called outside of the syntactic scope in which it was defined, but still has access to the syntactic scope in which it was defined.

Let's take a look at our code. The function first defines an instance, and then returns a function(name). The instance variable is used in this function(name). Under normal circumstances, after the immediate execution of the function, the instance variable will be recycled by the JavaScript garbage collection mechanism, but because function(name) is returned to the outside, and function(name) will be called at any time, the instance will be accessed at any time. variable, so the instance variable is retained in memory. This creates closures. In other words, function(name) is assigned to the external createOldestMan and is executed in the external syntax scope, but it can also access the instance in the internal syntax scope at the time of definition.

So under the influence of immediate execution of function and closure, instance is only applied for once, that is, there is only one instance. In other words, no matter how many times we execute createOldestMan("..."), instance will only be the value of the first time. So we can determine whether the instance has been instantiated and assign a value to the instance. If the instance has been instantiated, return the instance. This achieves the effect of having only one instance of a class.

Universal singleton mode

I can also modify the code, because in development, we may not only have one singleton, so we should make the code universal for all singletons. Where should we change it? That's right, change the proxy function. We only need to extract the oldestMan() in the proxy function and change the value to be passed in the form of parameters, not limited to oldestMan().

var singleObj;
var createSingleton = function (fn) {
  return function (text) {
    if (!singleObj) {
      singleObj = new fn (text);
    }
    return singleObj;
  }
}

In this way, we can pass the singleton as a parameter and use it to implement different singletons.
The complete code is like this:

var oldestMan = function (name) {
  this.name = name;
}

oldestMan.prototype.getName = function () {
  console.log(this.name);
}

//一个通用的代理函数
var singleObj;
var createSingleton = function (fn) {
  return function (text) {
    if (!singleObj) {
    singleObj = new fn (text);
    }
    return singleObj;
  }
}

var person_1 = createSingleton(oldestMan)("holz");
var person_2 = createSingleton(oldestMan)("tom");
person_1.getName(); //holz
person_2.getName(); //holz

Similarly, even if createSingleton is called again and a different value is passed in, the output is still the first "holz".

---

Summary

The definition of singleton pattern: a class has only one instance and can be accessed globally.
Applicable scenarios: In fact, the singleton mode is widely used in daily development, such as various floating windows, login floating windows, etc. No matter how many times we click, it is the same floating window, and the floating window remains the same from beginning to end. It was only created once. This scenario is very suitable for using the singleton mode.

Related recommendations:

JavaScript Design Pattern Series One: Factory Pattern

##

The above is the detailed content of JavaScript Design Pattern Series 2: Singleton Pattern. For more information, please follow other related articles on the PHP Chinese website!