This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
Simplest/Cleanest way to implement singleton in JavaScript?
I'm using this pattern for singletons, in the example the singleton is PlanetEarth:
var NAMESPACE = function () {
var privateFunction1 = function () {
privateFunction2();
};
var privateFunction2 = function () {
alert('I\'m private!');
};
var Constructors = {};
Constructors.PlanetEarth = function () {
privateFunction1();
privateFunction2();
};
Constructors.PlanetEarth.prototype = {
someMethod: function () {
if (console && console.log) {
console.log('some method');
}
}
};
Constructors.Person = function (name, address) {
this.name = name;
this.address = address;
};
Constructors.Person.prototype = {
walk: function () {
alert('STOMP!');
}
};
return {
Person: Constructors.Person, // there can be many
PlanetEarth: new Constructors.PlanetEarth() // there can only be one!
};
}();
Since PlanetEarth's constructor remains private, there can only be one.
Now, something tells me that this self-cooked thing isn't the best one can do, mostly because I don't have an academic education and I tend to solve problems in stupid ways. What would you propose as a better alternative my method, where better is defined as stylistically better and/or more powerful?
(1) UPDATE 2019: ES7 Version
class Singleton {
static instance;
constructor() {
if (instance) {
return instance;
}
this.instance = this;
}
foo() {
// ...
}
}
console.log(new Singleton() === new Singleton());
(2) ES6 Version
class Singleton {
constructor() {
const instance = this.constructor.instance;
if (instance) {
return instance;
}
this.constructor.instance = this;
}
foo() {
// ...
}
}
console.log(new Singleton() === new Singleton());
Best solution found:
http://code.google.com/p/jslibs/wiki/JavascriptTips#Singleton_pattern
function MySingletonClass () {
if (arguments.callee._singletonInstance) {
return arguments.callee._singletonInstance;
}
arguments.callee._singletonInstance = this;
this.Foo = function () {
// ...
};
}
var a = new MySingletonClass();
var b = MySingletonClass();
console.log( a === b ); // prints: true
For those who want the strict version:
(function (global) {
"use strict";
var MySingletonClass = function () {
if (MySingletonClass.prototype._singletonInstance) {
return MySingletonClass.prototype._singletonInstance;
}
MySingletonClass.prototype._singletonInstance = this;
this.Foo = function() {
// ...
};
};
var a = new MySingletonClass();
var b = MySingletonClass();
global.result = a === b;
} (window));
console.log(result);
Why use a constructor and prototyping for a single object?
The above is equivalent to:
var earth= {
someMethod: function () {
if (console && console.log)
console.log('some method');
}
};
privateFunction1();
privateFunction2();
return {
Person: Constructors.Person,
PlanetEarth: earth
};
Extending the above post by Tom, if you need a class type declaration and access the singleton instance using a variable, the code below might be of help. I like this notation as the code is little self guiding.
function SingletonClass(){
if ( arguments.callee.instance )
return arguments.callee.instance;
arguments.callee.instance = this;
}
SingletonClass.getInstance = function() {
var singletonClass = new SingletonClass();
return singletonClass;
};
To access the singleton, you would
var singleTon = SingletonClass.getInstance();
Related
I've written the following as an implementation of the module pattern:
let myClass = function (publicName, privateName)
{
this.publicVar = publicName;
let privateVar = privateName;
this.publicMethod = function ()
{
return this.publicVar;
}
this.getPublic = function ()
{
return this.publicMethod();
}
this.setPublic = function (newPublicName)
{
this.publicVar = newPublicName;
}
this.getPrivate = function ()
{
return privateVar;
}
this.setPrivate = function (newPrivateName)
{
privateMethod(newPrivateName);
}
let privateMethod = function (newPrivateName)
{
privateVar = newPrivateName;
}
return this;
}
let a = new myClass('public A', 'private A');
let b = new myClass('public B', 'private B');
// A
console.log(a.publicVar);
console.log(a.publicMethod());
console.log(a.getPrivate());
a.setPrivate('private A-2');
console.log(a.getPrivate());
console.log(a.getPublic());
a.setPublic('public A-2');
console.log(a.getPublic());
// B
console.log(b.publicVar);
console.log(b.publicMethod());
console.log(b.getPrivate());
b.setPrivate('private B-2');
console.log(b.getPrivate());
console.log(b.getPublic());
b.setPublic('public B-2');
console.log(b.getPublic());
It differs from examples I can generally find on the web though, as it doesn't use an IIFE, and doesn't use a constructor as such...
Is there a problem with what I've done?
I can't see anything wrong with it personally... It seems to encapsulate the methods and variables as it should.
NOTE: I also realise that a lot of the methods are unnecessary, I just wanted to test a few things to see if I could break it.
I have just started learning es6 module system. I have some es5 javascript code which I want to transform to es6 modules. There are 3 javascript files
workflow-designer.js
var WorkflowDesigner = (function () {
var constructor = function (element, options) {
var component = this;
if ($(element).hasClass('panel')) {
component.panel = $(element);
} else {
component.panel = $(element).closest('.panel');
}
};
extend(Object, constructor, {
getWorkflowName: function () {
return 'WorkflowName001';
},
nextStep: function () {
var o = {};
o['id'] = -1;
//some code here
return o;
},
prevStep: function () {
var o = {};
o['id'] = -1;
//some code here
return o;
}
});
return constructor;
})();
(function ($) {
$.fn.createWorkflowDesigner = function (options) {
debugger;
return this.map(function (index, element) {
return new WorkflowDesigner($(element), options);
});
};
}(jQuery));
extend.js
function extend(parent, child, methods) {
debugger;
let Surrogate = function () {};
Surrogate.prototype = parent.prototype;
child.prototype = new Surrogate();
child.prototype.constructor = child;
// Add a reference to the parent's constructor
child.parentConstructor = parent;
// Copy the methods passed in to the prototype
for (let name in methods) {
if (methods.hasOwnProperty(name)) {
child.prototype[name] = methods[name];
}
}
// so we can define the constructor inline
return child;
}
There a third file utils.js which contain extension methods like
if (!Array.prototype.find) {
Array.prototype.find = function (predicate) {
//some code here
}
}
if (!Array.prototype.doSomething) {
Array.prototype.doSomething = function (predicate) {
//some code here
}
}
$(document).keyup(function (event) {
//somthing here.
});
I know that to convert the code to es6 modules, I can simply export the extend function like export function extend(.....) in the extend.js file. However, I am not 100% sure how to convert the workflow-designer and utils.js to es6 modules.
I suspect that I need to something like below to convert my workflow-designer.js to es6 module:
export default function workflowDesigner() {
let constructor = function (element, options) {
options = options || {};
let component = this;
if ($(element).hasClass('panel')) {
component.panel = $(element);
} else {
component.panel = $(element).closest('.panel');
}
};
//rest of the code here....
return constructor;
};
Please let me know if I am moving into the right direction or not.
UPDATE:
As per #Bergi's suggesion I changed the extend function like below:
export default function extend(parent, child, methods) {
child.prototype = Object.create(parent.prototype);
child.prototype.constructor = child;
// Add a reference to the parent's constructor
child.parentConstructor = parent;
// Copy the methods passed in to the prototype
Object.assign(child, methods);
// so we can define the constructor inline
return child;
}
However, now I am getting error message that "workflowDesigner.getWorkflowName is not a function"
In the debug mode I can see that this function is available at workflowDesigner.__proto__.constructor.getWorkflowName. With the old code it works fine.
Just drop the IIFE from your module pattern - ES6 modules come with their own scope.
import extend from './extend.js';
export default function WorkflowDesigner(element, options) {
if ($(element).hasClass('panel')) {
this.panel = $(element);
} else {
this.panel = $(element).closest('.panel');
}
}
extend(Object, WorkflowDesigner, {
getWorkflowName: () => 'WorkflowName001',
…
});
const $ = jQuery; // you might want to solve this with a proper `import`
$.fn.createWorkflowDesigner = function (options) {
debugger;
return this.map(function (index, element) {
return new WorkflowDesigner($(element), options);
});
};
Please refer the following fiddle : http://jsfiddle.net/hBvSZ/5/
var NewObject = function () {
//Singleton should be accessible here
this.method1 = function() { }
};
Also can we pass singleton in such a way that the methods of singleton are just accessible to the NewObject ?
Store the singleton in a variable:
var singleton;
function NewObject () {
if (typeof singleton == 'undefined') {
// initialize new object here.
}
}
That's the basic idea.
To avoid global namespace pollution you can use a closure:
var NewObject = (function(){
var singleton;
return function () {
if (typeof singleton == 'undefined') {
// initialize new object here.
}
}
})();
Even though I doubt you actually need the Singleton pattern in JavaScript, here's how I'd do it:
var Client = (function() {
var instance;
var Client = function() {
};
Client.prototype.hello = function() {
console.log("hello");
};
return {
getInstance: function() {
if (!instance) {
instance = new Client();
}
return instance;
},
otherHelper: function() {
console.log("look i'm helping!");
},
};
})();
var a = Client.getInstance();
var b = Client.getInstance();
a.hello(); // "hello"
b.hello(); // "hello"
console.log("a === b", a === b); // true
Client.otherHelper(); // look i'm helping!
If you're using this server-side (node.js for example), you could do this
// client.js
var instance;
var getInstance = function getInstance() {
if (!instance) {
instance = new Client();
}
return instance;
};
var Client = function Client() {
};
Client.prototype.hello = function() {
console.log("hello");
};
exports.getInstance = getInstance;
Then usage is simple
// app.js
var Client = require("./client");
var myClient = Client.getInstance();
I have 2 Obj: I want to know that if they are Singleton?
a.
var OBJ = function () {
}
OBJ.prototype = {
setName : function (name) {
this.name = name;
},
getName : function () {
return this.name;
}
}
b.
var OBJ = {
setName : function (name) {
this.name = name;
},
getName : function () {
return this.name;
}
}
You can check it by creating two instances of class and compare them:
Print( a === b ); // prints: true
if prints true class is singleton
Or you can try this code for SingletonPattern:
function MyClass() {
if ( arguments.callee._singletonInstance )
return arguments.callee._singletonInstance;
arguments.callee._singletonInstance = this;
this.Foo = function() {
// ...
}
}
var a = new MyClass()
var b = MyClass()
Print( a === b ); // prints: true
Best Solution For Singleton Pattern
This will help you How to write a singleton class in javascript
function Cats() {
var names = [];
// Get the instance of the Cats class
// If there's none, instanciate one
var getInstance = function() {
if (!Cats.singletonInstance) {
Cats.singletonInstance = createInstance();
}
return Cats.singletonInstance;
}
// Create an instance of the Cats class
var createInstance = function() {
// Here, you return all public methods and variables
return {
add : function(name) {
names.push(name);
return this.names();
},
names : function() {
return names;
}
}
}
return getInstance();
}
More on http://www.javascriptkata.com/2009/09/30/how-to-write-a-singleton-class-in-javascript/
Also it can be possible duplicate of Javascript: best Singleton pattern and Simplest/Cleanest way to implement singleton in JavaScript?
How could I do this?
Class
var Factory = (function() {
var Class = function() {
this.name = 'John';
this.methods = {
get: function(callback) {
callback();
}
};
};
return {
createClass: function() {
return new Class();
}
};
}());
Usage
var MyClass = Factory.createClass();
MyClass.methods.get(function() {
this.name // => returns undenfined
});
Thanks for any help!
You need to save a reference to this in the outer Class function and call call:
var instance = this;
this.methods = {
get: function(callback) {
callback.call(instance);
}
};
var Class = function() {
// Save a reference to this that can be used in local closures.
var me = this;
this.name = 'John';
this.methods = {
get: function(callback) {
// Use 'call()', passing the reference to the 'Class' object
callback.call(me);
}
};
};
#SLaks - The declaration of scope as a Global variable is bad practice.
#Ferdinand Beyer - have you tested if it functions?
The better way will be the scope binding. The Prototype javascript framework produced a nice concept and we can easily implement it like
Function.prototype.bind = function(scope) {
var _function = this;
return function() {
return _function.apply(scope, arguments);
}
}
and then yoou code should have only a single change and it will maintin the scope of your class.
var Factory = (function() {
var Class = function() {
this.name = 'John';
var me = this;
this.methods = {
get: function(callback) {
callback();
}
};
};
return {
createClass: function() {
return new Class();
}
};
}());
var MyClass = Factory.createClass();
MyClass.methods.get(function() {
console.info(this.name) // => returns undenfined
}.bind(MyClass));
I mean only the function call get with .bind(MyClass)