How to implement singleton pattern using ES6

Singleton is a very basic thing in programming. This article mainly introduces you to the relevant information about using ES6 to implement the singleton pattern and its application. The article introduces it in great detail through sample code. Friends who need it can refer to it. For reference, let’s learn with the editor below.

Preface

In the eyes of traditional development engineers, a singleton is to ensure that a class has only one instance. The implementation method is generally to first determine the instance. Whether it exists or not, if it exists, it will be returned directly. If it does not exist, it will be created and returned. This ensures that a class has only one instance object. In JavaScript, a singleton acts as a namespace provider, providing a unique access point to the object from the global namespace.

The definition of singleton mode is to ensure that a class has only one instance and provide a global access point to access it.

The singleton pattern can create objects at the appropriate time and create the only one.

The code is close to life and very interesting. For example, when logging in to a website, a login pop-up box will pop up after clicking login. Even if you click again, the same pop-up box will not appear again. Or in a music player program, if the user opens a piece of music and wants to open another piece of music, the previous playback interface will automatically close and switch to the current playback interface. These are all application scenarios of the singleton pattern.

To implement a singleton pattern, a classic way is to create a class. There is another method in the class that can create an instance object of the class, and there is also a mark to record whether an instance object has been created. If the object already exists, a reference to the first instantiated object is returned.

Implementation of singleton mode

es5 implementation method

var Singleton = function(name) {
 this.name = name;
 //一个标记，用来判断是否已将创建了该类的实例
 this.instance = null;
}
// 提供了一个静态方法，用户可以直接在类上调用
Singleton.getInstance = function(name) {
 // 没有实例化的时候创建一个该类的实例
 if(!this.instance) {
  this.instance = new Singleton(name);
 }
 // 已经实例化了，返回第一次实例化对象的引用
 return this.instance;
}

Users can be widely known through a interface to access the instance.

We try to instantiate the object twice and observe whether the two instantiation results point to the same object.

var a = Singleton.getInstance('sven1');
var b = Singleton.getInstance('sven2');
// 指向的是唯一实例化的对象
console.log(a === b);

The return result is: true. Explain that there is a reference relationship between a and b.

es6 implementation

Create the Singleton class. The class keyword and static functions are both new in es6.

class Singleton {
 constructor(name) {
  this.name = name;
  this.instance = null;
 }
 // 构造一个广为人知的接口，供用户对该类进行实例化
 static getInstance(name) {
  if(!this.instance) {
   this.instance = new Singleton(name);
  }
  return this.instance;
 }
}

Application Example of Singleton Mode

We use a common scenario in life to illustrate the application of singleton mode.

On any website, when you click the login button, only one and only one login box will pop up. Even if you click the login button again later, no more pop-up boxes will pop up. This is a typical application of the singleton pattern. Next we implement it. In order to focus on the display of singleton mode, let’s simplify the login box.

The above is the detailed content of How to implement singleton pattern using ES6. For more information, please follow other related articles on the PHP Chinese website!