Detailed Explanation and Simple Example of javascript Singleton Pattern

JS singleton pattern

Summary:

Singleton means that a class has only one instance, and this class creates this instance by itself.

Generate a singleton directly from the literal quantity of the object:

var singleton = {
  prop: 1,
  method: function(){
    console.log(a);  //1
  }
}

Strictly speaking, object literals may not be singleton patterns. Generating singletons is the function of object literals (which have been encapsulated), while singleton patterns are a design pattern (which needs to be conceived or designed by itself).

Generate the singleton pattern of the instance with new inside the class:

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

The singleton pattern only detects whether one instance is generated. If there is no instance, the instance is generated. Returns this instance if it has been generated. Ensure that this class has only one instance.

Because of hoisting, the function is declared in advance, so it doesn't matter where the singleton function is placed, but every call declares the function singleton, which may not be elegant enough.

Since the new keyword is an execution function and this points to this object, you can determine whether the class's this is assigned to 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

In this example, we point instance to the class Singleton, and then instantiate it outside the class through new, which is similar to new in the previous example. Because this is modified to detect whether Singleton class has been executed, I feel that it is not semantic enough.

The above example is written in es6 refactoring.

Class internal new generates singletons:

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

Modify this to point to generate singletons:

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
 　　 

Of course, there are other ways to instantiate a singleton besides these two.

Thank you for reading, hope to help everyone, thank you for your support to this site!