The so-called Singleton pattern, as the name implies, is only one instance of a class.
So, when we create an instance, we have to determine if it already exists, and if it already exists, return to the existing instance, without creating one ( singleton mode, the core is a class with only one instance If it does not exist, create this instance.
Well, the core idea of the singleton pattern and the creation process are largely clear, so let's start by looking at how it's done in the JavaScript world.
Second, actual combat one |
The core idea: Use the scope of JavaScript to form a closure, so that you can create a private variable (assuming we name the private variable instance), and then assign the created instance to the private variable instance OK. Whenever you want to create an instance of this class, first determine if instance has referenced an existing instance, if there is no reference, that is, the class is not created, so creates an instance and assigns it to instance; If instance already has a reference, an instance of that class already exists. So no need to create any more, just use this instance to be OK.
The first step: perform anonymous functions to prevent namespace contamination. In an anonymous function, first define the above mentioned private variable instance and a class. For this class, I assume that it has a name (name) and an age of two attribute fields and a party that outputs their names (DisplayInfo) ha.
' Use strict ' var singletonaccepter = (function () { //assigns instance to null by default var instance = null; //class:supposeclass function supposeclass ( args ) { var args = args | | {}; this.name = args.name | | ' Monkey '; this.age = args.age | | 24; }; SupposeClass.prototype = { constructor: SupposeClass, displayinfo: function () { Console.log (' name: ' + this.name + ' age: ' + This.age); } };}) ();
650) this.width=650; "src="/img/fz.gif "alt=" Copy Code "style=" Border:none rgb (221,221,221); Background-color:rgb ( 255,255,255); "/>
The second step: using the return + object literal, we want to, outward exposure to the east, thrown outward.
As follows:
650) this.width=650; "src="/img/fz.gif "alt=" Copy Code "style=" Border:none rgb (221,221,221); Background-color:rgb ( 255,255,255); "/>
return {//the name of the class name: ' Supposeclass ',//Create an instance method of the class Getinstance:function (args) {//Use private variable instance to implement Singleton mode if (instance = = = NULL) {instance = new Supposeclass (args); } return instance; }};
650) this.width=650; "src="/img/fz.gif "alt=" Copy Code "style=" Border:none rgb (221,221,221); Background-color:rgb ( 255,255,255); "/>
Finally, the code that merges the second step in the first step forms a singleton pattern.
As follows:
650) this.width=650; "src="/img/fz.gif "alt=" Copy Code "style=" Border:none rgb (221,221,221); Background-color:rgb ( 255,255,255); "/>
' Use strict ' var singletonaccepter = (function () { //assigns instance to null by default var instance = null; //class:supposeclass function supposeclass ( args ) { var args = args | | {}; this.name = args.name | | ' Monkey '; this.age = args.age | | 24; }; SupposeClass.prototype = { constructor: SupposeClass, displayinfo: function () { Console.log (' name: ' + this.name + ' age: ' + This.age); } }; return { Name of the //class name: ' Supposeclass ', //Create an instance method of the class getinstance: function ( args ) { //using private variable instance to implement Singleton mode if ( instance === null ) { instance = new supposeclass ( args ); } return instance; } };}) ();
650) this.width=650; "src="/img/fz.gif "alt=" Copy Code "style=" Border:none rgb (221,221,221); Background-color:rgb ( 255,255,255); "/>
Next, Let's examine this single pattern of writing. In the above code, add Console.log to the class Supposeclass, and if only one instance of it is created, then only one log will be printed.
Modify the code as follows:
650) this.width=650; "src="/img/fz.gif "alt=" Copy Code "style=" Border:none rgb (221,221,221); Background-color:rgb ( 255,255,255); "/>
' Use strict ' var singletonaccepter = (function () { var instance = null; function supposeclass ( args ) { var args = args | | {}; this.name = args.name | | ' Monkey '; this.age = args.age | | 24; //Test Single-case mode console.log (' this is created! '); }; SupposeClass.prototype = { constructor: SupposeClass, Displayinfo: function () { Console.log (' name: ' + this.name + ‘ age: ' + this.age); } }; return { name: ' Supposeclass ', getinstance: function ( args ) { if ( instance === null ) { instance = new supposeclass ( args ); } return instance; } };}) ();
650) this.width=650; "src="/img/fz.gif "alt=" Copy Code "style=" Border:none rgb (221,221,221); Background-color:rgb ( 255,255,255); "/>
Call two times getinstance method to see how several records are printed
Singletonaccepter.getinstance (); Singletonaccepter.getinstance ();
Execute the code and open Chrome as follows:
650) this.width=650; "Src=" http://images2015.cnblogs.com/blog/887360/201605/887360-20160502134055435-1075500884. PNG "style=" border:0px; "/>
The identification is complete, only one instance at a time.
Third, the actual combat two |
idea: use attributes to determine if an instance already exists.
What do you mean?
In the world of JavaScript, the class (function) is not an object, so give it an attribute instance, which refers to the created instance, by judging whether instance has referenced the created instance.
As follows:
650) this.width=650; "src="/img/fz.gif "alt=" Copy Code "style=" Border:none rgb (221,221,221); Background-color:rgb ( 255,255,255); "/>
function Singletonaccepter ( args ) { //Determines if an instance of Universe.instance already exists if (typeof singletonaccepter.instance === ' object ') { return singletonaccepter.instance; } this.name = args.name | | ' Monkey '; this.age = args.age | | 24; singletonAccepter.instance = this;}; singletonaccepter.prototype = { constructor: singletonaccepter, displayinfo: function () { console.log (' name: ' + this.name + ' age: ' + this.age); }};
650) this.width=650; "src="/img/fz.gif "alt=" Copy Code "style=" Border:none rgb (221,221,221); Background-color:rgb ( 255,255,255); "/>
Four, the actual combat three |
In the JavaScript world, this is the referenced object.
Remember how JavaScript created objects from new?
New
1 . Create a new object, the type of this object when object;
2, the object of the __proto__ hidden pointer to the prototype prototype;
3, executes the constructor function, when this is mentioned, represents the newly created object;
4 . Returns the newly created object.
Note: If you return at the end, then return is a basic type, such as 3, is invalid; otherwise, the reference type is returned.
Notice the 3rd?
When new, this represents the newly created object. So, we can use closures to declare a variable instance in the class to refer to the created instance. Then rewrite the class, OK.
As follows:
650) this.width=650; "src="/img/fz.gif "alt=" Copy Code "style=" Border:none rgb (221,221,221); Background-color:rgb ( 255,255,255); "/>
Function singletonaccepter ( args ) { var instance = null; var args = args | | {}; this.name = args.name | | ' Monkey '; this.age = args.age | | 24; //creates an instance of instance reference this instance = this; //overriding constructor singletonaccepter = function () { return instance; }}; singletonaccepter.prototype = { constructor: singletonaccepter, displayinfo: function () { console.log (' name: ' + this.name + ' age: ' + this.age); }};
650) this.width=650; "src="/img/fz.gif "alt=" Copy Code "style=" Border:none rgb (221,221,221); Background-color:rgb ( 255,255,255); "/>
JavaScript's single-case combat