blocks|key|1383332|text|后一个代码框显示了我所见过的JS开发人员在Javascript中对他们的OO设计版本的称呼。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1383333|Singeton是指不能构造的单数对象(我想，在初始定义中除外)。你有一个全局的单例实例。|1383334|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

The latter code box shows what I've seen JS devs call their version of OO design in Javascript. 

Singetons are meant to be singular objects that can't be constructed (except, I suppose, in the initial definition. You have one, global instance of a singleton.

blocks|key|1383385|text|使用“伪构造函数”的意义在于它创建了一个新的变量作用域。您可以在函数内声明局部变量，这些变量在任何嵌套函数中都可用，但不能在全局范围内使用。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1383386|实际上有两种方法可以做到这一点。您可以像示例中那样使用new调用函数，也可以直接调用函数。在如何编写代码方面有一些细微的差异，但它们在本质上是等效的。|offset|length|style|CODE|1383387|你的第二个例子可以写成这样：|1383388|var+singleton+=+new+function+()+{
++++var+privateVariable+=+42;+//+This+can+be+accessed+by+dothis+and+dothat

++++this.dothis+=+function+()+{
++++++++return+privateVariable;
++++};

++++this.dothat+=+function+()+{};
};+//+Parentheses+are+allowed,+but+not+necessary+unless+you+are+passing+parameters|code-block|syntax|javascript|1383389|或|1383390|var+singleton+=+(function+()+{
++++var+privateVariable+=+42;+//+This+can+be+accessed+by+dothis+and+dothat

++++return+{
++++++++dothis:+function+()+{
++++++++++++return+privateVariable;
++++++++},

++++++++dothat:+function+()+{}
++++};
})();+//+Parentheses+are+required+here+since+we+are+calling+the+function|1383391|您还可以将参数传递给任一函数(您需要在第一个示例中添加括号)。|1383392|entityMap^0|0|R|3|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|X|8|@$D|Y|E|Z|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|10|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|11|8|@]|9|@]|A|$M|N]]|$1|O|3|P|5|6|7|12|8|@]|9|@]|A|$]]|$1|Q|3|R|5|L|7|13|8|@]|9|@]|A|$M|N]]|$1|S|3|T|5|6|7|14|8|@]|9|@]|A|$]]|$1|U|3|-4|5|6|7|15|8|@]|9|@]|A|$]]]|V|$]]

The point of using the "pseudo constructor" is that it creates a new variable scope. You can declare local variables inside the function that are available inside any nested functions but not from the global scope.

There are actually two ways of doing it. You can call the function with <code>new</code> like in your example, or just call the function directly. There are slight differences in how you would write the code, but they are essentially equivalent.

Your second example could be written like this:

<pre><code>var singleton = new function () {
 var privateVariable = 42; // This can be accessed by dothis and dothat

 this.dothis = function () {
 return privateVariable;
 };

 this.dothat = function () {};
}; // Parentheses are allowed, but not necessary unless you are passing parameters
</code></pre>

or

<pre><code>var singleton = (function () {
 var privateVariable = 42; // This can be accessed by dothis and dothat

 return {
 dothis: function () {
 return privateVariable;
 },

 dothat: function () {}
 };
})(); // Parentheses are required here since we are calling the function
</code></pre>

You could also pass arguments to either function (you would need to add parentheses to the first example).

blocks|key|1168405|text|从火狐扩展到网站，我都使用过第二个版本(var+singleton+=+{};)，它工作得非常好。一个好主意是不要在花括号内定义东西，而是在花括号外使用对象的名称，如下所示：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1168406|var+singleton+=+{};
singleton.dothis+=+function(){

};
singleton.someVariable+=+5;|code-block|syntax|javascript|1168407|entityMap^0|K|J|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

I have used the second version (<code>var singleton = {};</code>) for everything from Firefox extensions to websites, and it works really well. One good idea is to not define things inside the curly brackets, but outside it using the name of the object, like so:

<pre><code>var singleton = {};
singleton.dothis = function(){

};
singleton.someVariable = 5;
</code></pre>

blocks|key|1168446|text|单例模式是通过使用一个方法创建一个类来实现的，该方法在类不存在的情况下创建一个新的实例。如果一个实例已经存在，它只是返回一个对该对象的引用。1|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1168447|(function+(global)+{

+++++var+singleton;

+++++function+Singleton+()+{
+++++++++//+singleton+does+have+a+constructor+that+should+only+be+used+once++++
+++++++++this.foo+=+"bar";
+++++++++delete+Singleton;+//+disappear+the+constructor+if+you+want
+++++}

+++++global.singleton+=+function+()+{
+++++++++return+singleton+%7C%7C+(singleton+=+new+Singleton());
+++++};

})(window);

var+s+=+singleton();
console.log(s.foo);

var+y+=+singleton();
y.foo+=+"foo";
console.log(s.foo);|code-block|syntax|javascript|1168448|您不能仅仅将单例声明为对象，因为这会实例化它，而不是声明它。它也没有提供一种机制，让代码不知道之前对单例的引用来检索它。单例不是由单例返回的对象/类，它是一个结构。这类似于闭包变量不是闭包，提供闭包的函数作用域就是闭包。|1168449|entityMap|0|LINK|mutability|MUTABLE|url|http://en.wikipedia.org/wiki/Singleton_pattern^0|1Y|1|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@$A|T|B|U|1|V]]|C|$]]|$1|D|3|E|5|F|7|W|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|X|8|@]|9|@]|C|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|C|$]]]|L|$M|$5|N|O|P|C|$Q|R]]]]

The singleton pattern is implemented by creating a class with a method that creates a new instance of the class if one does not exist. If an instance already exists, it simply returns a reference to that object. <a href="http://en.wikipedia.org/wiki/Singleton_pattern" rel="nofollow noreferrer">1</a>

<pre><code>(function (global) {

 var singleton;

 function Singleton () {
 // singleton does have a constructor that should only be used once 
 this.foo = "bar";
 delete Singleton; // disappear the constructor if you want
 }

 global.singleton = function () {
 return singleton || (singleton = new Singleton());
 };

})(window);

var s = singleton();
console.log(s.foo);

var y = singleton();
y.foo = "foo";
console.log(s.foo);
</code></pre>

You don't just declare the singleton as an object because that instantiates it, it doesn't declare it. It also doesn't provide a mechanism for code that doesn't know about a previous reference to the singleton to retrieve it. The singleton is not the object/class that is returned by the singleton, it's a structure. This is similar to how closured variables are not closures, the function scope providing the closure is the closure.

blocks|key|1168489|text|克罗克福德(似乎)同意对象文字是JavaScript中的单例所需的全部内容：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1168490|http://webcache.googleusercontent.com/search?q=cache:-j5RwC92YU8J:www.crockford.com/codecamp/The%252520Good%252520Parts%252520ppt/5%252520functional.ppt%2Bsingleton%2Bsite:www.crockford.com&cd=1&hl=en&ct=clnk|offset|length|1168491|entityMap|0|LINK|mutability|MUTABLE|url|http://webcache.googleusercontent.com/search?q=cache:-j5RwC92YU8J:www.crockford.com/codecamp/The%252520Good%252520Parts%252520ppt/5%252520functional.ppt%2Bsingleton%2Bsite:www.crockford.com&cd=1&hl=en&ct=clnk^0|0|0|5G|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@$D|P|E|Q|1|R]]|A|$]]|$1|F|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|G|$H|$5|I|J|K|A|$L|M]]]]

Crockford (seems to) agree that the object literal is all you need for a singleton in JavaScript:

<a href="http://webcache.googleusercontent.com/search?q=cache:-j5RwC92YU8J:www.crockford.com/codecamp/The%2520Good%2520Parts%2520ppt/5%2520functional.ppt+singleton+site:www.crockford.com&amp;cd=1&amp;hl=en&amp;ct=clnk" rel="nofollow noreferrer">http://webcache.googleusercontent.com/search?q=cache:-j5RwC92YU8J:www.crockford.com/codecamp/The%2520Good%2520Parts%2520ppt/5%2520functional.ppt+singleton+site:www.crockford.com&amp;cd=1&amp;hl=en&amp;ct=clnk</a>

blocks|key|1383691|text|这样如何：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1383692|function+Singleton()+{

++++//+---------------
++++//+Singleton+part.
++++//+---------------

++++var+_className+=+null;
++++var+_globalScope+=+null;

++++if+(+!(this+instanceof+arguments.callee)+)+{
++++++++throw+new+Error("Constructor+called+as+a+function.");
++++}

++++if+(+!(_className+=+arguments.callee.name)+)+{
++++++++throw+new+Error("Unable+to+determine+class+name.")
++++}

++++_globalScope+=+(function(){return+this;}).call(null);

++++if+(+!_globalScope.singletons+)+{
++++++++_globalScope.singletons+=+[];
++++}

++++if+(+_globalScope.singletons[_className]+)+{
++++++++return+_globalScope.singletons[_className];
++++}+else+{
++++++++_globalScope.singletons[_className]+=+this;
++++}

++++//+------------
++++//+Normal+part.
++++//+------------

++++var+_x+=+null;

++++this.setx+=+function(val)+{
++++++++_x+=+val;
++++};+//+setx()

++++this.getx+=+function()+{
++++++++return+_x;
++++};+//+getx()

++++function+_init()+{
++++++++_x+=+0;+//+Whatever+initialisation+here.
++++}+//+_init()
++++_init();

}+//+Singleton()

++++var+p+=+new+Singleton;
++++var+q+=+new+Singleton;

++++p.setx(15);
++++q.getx();+//+returns+15|code-block|syntax|javascript|1383693|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

How about this:

<pre><code>function Singleton() {

 // ---------------
 // Singleton part.
 // ---------------

 var _className = null;
 var _globalScope = null;

 if ( !(this instanceof arguments.callee) ) {
 throw new Error("Constructor called as a function.");
 }

 if ( !(_className = arguments.callee.name) ) {
 throw new Error("Unable to determine class name.")
 }

 _globalScope = (function(){return this;}).call(null);

 if ( !_globalScope.singletons ) {
 _globalScope.singletons = [];
 }

 if ( _globalScope.singletons[_className] ) {
 return _globalScope.singletons[_className];
 } else {
 _globalScope.singletons[_className] = this;
 }

 // ------------
 // Normal part.
 // ------------

 var _x = null;

 this.setx = function(val) {
 _x = val;
 }; // setx()

 this.getx = function() {
 return _x;
 }; // getx()

 function _init() {
 _x = 0; // Whatever initialisation here.
 } // _init()
 _init();

} // Singleton()

 var p = new Singleton;
 var q = new Singleton;

 p.setx(15);
 q.getx(); // returns 15
</code></pre>

blocks|key|1168731|text|我从CMS+/+CMS'+answer中窃取了它，并对其进行了更改，以便可以将其调用为：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1168732|MySingleton.getInstance().publicMethod1();|code-block|syntax|javascript|1168733|稍加改动：|1168734|var+MySingleton+=+{++++++++++++++++//+These+two+lines

++++getInstance:+function()+{++++++//+These+two+lines

++++++var+instance+=+(function()+{

++++++++var+privateVar;

++++++++function+privateMethod+()+{
++++++++++//+...
++++++++++console.log(+"b"+);
++++++++}

++++++++return+{+//+public+interface
++++++++++publicMethod1:+function+()+{
++++++++++++++//+private+members+can+be+accessed+here
++++++++++++++console.log(+"a"+);
+++++++++++},
++++++++++publicMethod2:+function+()+{
++++++++++++//+...
++++++++++++privateMethod();
++++++++++}
++++++++};
++++++})();

++++++singleton+=+function+()+{+//+re-define+the+function+for+subsequent+calls
++++++++return+instance;
++++++};

++++++return+singleton();+//+call+the+new+function
++++}
}|1168735|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/users/5445/cms|1|https://stackoverflow.com/questions/1895635/javascript-singleton-question/1895669#1895669^0|2|3|0|8|B|1|0|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@$A|X|B|Y|1|Z]|$A|10|B|11|1|12]]|C|$]]|$1|D|3|E|5|F|7|13|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|14|8|@]|9|@]|C|$]]|$1|K|3|L|5|F|7|15|8|@]|9|@]|C|$G|H]]|$1|M|3|-4|5|6|7|16|8|@]|9|@]|C|$]]]|N|$O|$5|P|Q|R|C|$S|T]]|U|$5|P|Q|R|C|$S|V]]]]

I stole this from <a href="https://stackoverflow.com/users/5445/cms">CMS</a> / <a href="https://stackoverflow.com/questions/1895635/javascript-singleton-question/1895669#1895669">CMS' answer</a>, and changed it so it can be invoked as:

<pre><code>MySingleton.getInstance().publicMethod1();
</code></pre>

With the slight alternation:

<pre><code>var MySingleton = { // These two lines

 getInstance: function() { // These two lines

 var instance = (function() {

 var privateVar;

 function privateMethod () {
 // ...
 console.log( "b" );
 }

 return { // public interface
 publicMethod1: function () {
 // private members can be accessed here
 console.log( "a" );
 },
 publicMethod2: function () {
 // ...
 privateMethod();
 }
 };
 })();

 singleton = function () { // re-define the function for subsequent calls
 return instance;
 };

 return singleton(); // call the new function
 }
}
</code></pre>

blocks|key|1383874|text|ES5规范允许我们使用Object.create()：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1383875|var+SingletonClass+=+(function()+{
++++var+instance;
++++function+SingletonClass()+{
++++++++if+(instance+==+null)+{
++++++++++++instance+=+Object.create(SingletonClass.prototype);
++++++++}

++++++++return+instance;
++++}

++++return+{
++++++++getInstance:+function()+{
++++++++++++return+new+SingletonClass();
++++++++}
+++};
})();

var+x+=+SingletonClass.getInstance();
var+y+=+SingletonClass.getInstance();
var+z+=+new+x.constructor();|code-block|syntax|javascript|1383876|这很好，因为我们不必担心我们的构造函数泄漏，我们仍然总是以相同的实例结束。|1383877|这种结构还有一个优点，那就是我们的Singleton只有在需要时才会构造它自己。此外，像我们在这里所做的那样使用闭包可以防止外部代码意外地或以其他方式使用我们的"instance“变量。我们可以在同一个地方构建更多的私有变量，并且我们可以在我们的类原型上定义我们想要公开导出的任何东西。|1383878|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

The ES5 spec lets us use Object.create():

<pre><code>var SingletonClass = (function() {
 var instance;
 function SingletonClass() {
 if (instance == null) {
 instance = Object.create(SingletonClass.prototype);
 }

 return instance;
 }

 return {
 getInstance: function() {
 return new SingletonClass();
 }
 };
})();

var x = SingletonClass.getInstance();
var y = SingletonClass.getInstance();
var z = new x.constructor();
</code></pre>

This is nice, since we don't have to worry about our constructor leaking, we still always end up with the same instance.

This structure also has the advantage that our Singleton doesn't construct itself until it is required. Additionally, using the closure as we do here prevents external code from using our "instance" variable, accidentally or otherwise. We can build more private variables in the same place and we can define anything we care to export publically on our class prototype.

I just read a few threads on the discussion of singleton design in javascript. I'm 100% new to the Design Pattern stuff but as I see since a Singleton by definition won't have the need to be instantiated, conceptually if it's not to be instantiated, in my opinion it doesn't have to be treated like conventional objects which are created from a blueprint(classes). So my wonder is why not just think of a singleton just as something statically available that is wrapped in some sort of scope and that should be all.

From the threads I saw, most of them make a singleton though traditional javascript 

<pre><code>new function(){} 
</code></pre>

followed by making a pseudo constructor.

Well I just think an object literal is enough enough:

<pre><code>var singleton = {
 dothis: function(){},
 dothat: function(){}
}
</code></pre>

right? Or anybody got better insights? 

[update] : Again my point is why don't people just use a simpler way to make singletons in javascript as I showed in the second snippet, if there's an absolute reason please tell me. I'm usually afraid of this kind of situation that I simplify things to much :D

javascript singleton question

我刚刚读了一些关于javascript中单例设计讨论的帖子。我对设计模式是100%的新手，但正如我所看到的，因为单例的定义不需要被实例化，从概念上讲，如果它不被实例化，在我看来，它不需要像从蓝图(类)创建的传统对象一样被对待。所以我想知道，为什么不把单例看作是静态可用的东西，包装在某种范围内，这应该就是全部。从我看到的...

问javascript单例问题
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问javascript单例问题EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问javascript单例问题
EN