I have this function:
WSConnection: function() {
var instance = new Connection();
return instance;
},
How to I tweak this code (avoid making multiple instances) so that I always get same instance of my Connection class when I call WSConnection();?
May be:
WSConnection: function() {
this.instance = this.instance || new Connection();
return this.instance;
},
Seems to me it is the most compact of all possible solutions..
Create a local variable next to the object that WSConnection is defined on:
var connectionInstance;
// ... {
WSConnection: function() {
return connectionInstance || connectionInstance = new Connection();
},
// ... }
If the object is itself a class then use a "private class" variable instead (this.connectionInstance).
If this use case is specific to the WSConnection function, use a lazily (or non-lazily—suit yourself) initialized global:
var _instance = null; // you can also just create the singleton instance here (eager/non-lazy initialization)
WSConnection: function() {
if (!_instance)
_instance = new Connection();
return _instance;
}
However, if this is an intrinsic quality of the Connection class altogether, turn it into a singleton; there are several ways to do that (e.g. how Java would do it), but since Javascript is a flexible language, I'd do it this way:
Connection = new Connection() // do this at a global scope
Now you will just use Connection to get the single global instance and not new Connection; this also means that you probably won't need the WSConnection function any more. Also, this ensures nothing will be able to create another instance of Connection (if that's what you need, that is)
Create the instance beforehand. You can wrap your containing object in a function, so that the instance variable is not global:
var someobj = (function() {
var instance = new Connection();
return {
WSConnection: function() {
return instance;
}
};
})();
Alternatively use lazy creation, i.e. create it on the first use:
var someobj = (function() {
var instance = null;
return {
WSConnection: function() {
if (instance == null) {
instance = new Connection();
}
return instance;
}
};
})();
WSConnection: (function(){
var instance = null;
return function() {
if( !instance ){
instance = new Connection();
}
return instance;
};
})()
Related
I'm just trying to understand Javascript a little deeper.
I created a 'class' gameData that I only want ONE of, doesn't need a constructor, or instantiated.
So I created it like so...
var gameData = new function () {
//May need this later
this.init = function () {
};
this.storageAvailable = function () {
if (typeof (Storage) !== "undefined") {
return true;
}
else {
return false;
}
};
}
Realizing that the 'new' keyword doesn't allow it to be instantiated and makes it available LIKE a static class would be in C#.
Am I thinking of this correctly? As static?
No, it is not static because it still has a constructor property pointing to your "anonymous" function. In your example, you could use
var gameData2 = new (gameData.constructor)();
to reinstantiate a second object, so the "class" (instance actually) is not really "static". You are basically leaking the constructor, and possibly the data that is bound to it. Also, a useless prototype object (gameData.constructor.prototype) does get created and is inserted in the prototype chain of gameData, which is not what you want.
Instead, you might use
a single, simple object literal (as in Daff's answer). That means you don't have a constructor, no closure-scoped private variables (you have used none anyway) and no (custom) prototype.
the (revealing) module pattern (as in jAndy's answer). There you'd have an IIFE to create closure-scoped variables, and can return any kind of object.
an actual constructor ("class") that can be instantiated later (when needed), and yields the same singleton object always.
This is what the singleton pattern would look like:
function GameData() {
if (this.constructor.singleton)
return this.constructor.singleton;
else
this.constructor.singleton = this;
// init:
// * private vars
// * public properties
// ...
}
GameData.prototype.storageAvailable = function () {
if (typeof (Storage) !== "undefined") {
return true;
}
else {
return false;
}
};
var gameData = new GameData();
var gameData2 = new GameData();
gameData === gameData2 === GameData.singleton; // true
Yet, the prototype is quite useless because you have only one instance of GameData. It would only get interesting with inheritance.
There is no Class in ECMAscript, there is only Object.
When new is used to invoke a function, we call it a constructor function. This function somewhat auto returns a new object once it finished. Any data that is stored within that object using this (which references that newly created object) is returned as property of that object. Beside that, new sets a property called constructor to exactly this function.
In your case, you don't even really require the usage of new, you could easily re-write your code as follows:
var gameData = (function () {
var public = { },
private = { }; // any private data can get stored here
//May need this later
public.init = function () {
};
public.storageAvailable = function () {
if (typeof (Storage) !== "undefined") {
return true;
}
else {
return false;
}
};
return public;
}());
This is called the factory pattern, singleton pattern, module pattern, and there might be some other names.
I think what you are looking for is just a simple JavaScript object:
var gameData = {
//May need this later
init : function () {
},
storageAvailable : function () {
if (typeof (Storage) !== "undefined") {
return true;
}
else {
return false;
}
}
}
If you want to use private variables create a revealing module pattern style wrapper. This is basically what jAndy suggested:
var gameData = (function() {
var private = 'private variable';
return {
//May need this later
init : function () {
},
storageAvailable : function () {
if (typeof (Storage) !== "undefined") {
return true;
} else {
return false;
}
}
}
})();
I am trying to expose a module. I wanted to expose only one instance of it to all callers, and I want to wait until the module is called to instantiate it. I tried to do this:
var obj = {};
var foobar = function(){
var id=22;
function GetId(){ return ++id; }
return{ GetId: GetId };
};
obj.foobar = (function(){
if (obj.foobar instanceof foobar) {
return obj.foobar;
}
return new foobar();
})();
console.log(obj.foobar.GetId());//23
console.log(obj.foobar.GetId());//24
But really it is just an obfuscation of
obj.foobar = new foobar();
What I had intended was to instantiate obj.foobar = new foobar() when obj.foobar.GetId() is called the first time, and the second time obj.foobar.GetId() is called use the already instantiated version. Although not present here, there are dependencies which require waiting to instantiate new foobar(); so it cannot be executed right away.
How can I accomplish this, what did I miss?
You can use a function call each time you access foobar:
obj.foobar = (function() {
var inst;
return function() {
return inst || (inst = foobar());
};
})();
console.log(obj.foobar().GetId()); // 23
You can also use ECMAScript 5's named accessor properties if the targeted execution environments support them:
Object.defineProperty(obj, "foobar", {
get: (function() {
var inst;
return function() {
return inst || (inst = foobar());
};
})()
});
console.log(obj.foobar.GetId()); // 23
Alternatively, provided that you know the list of methods which can be called on foobar, you can use a more complex solution:
obj.foobar = (function() {
var inst, res = {}, methods = ["GetId"];
function createLazyMethod(method) {
return function() {
if (!inst) {
obj.foobar = inst = foobar();
}
return inst[method].apply(inst, methods.slice.call(arguments, 0));
};
}
for (var i = 0; i < methods.length; ++i) {
res[methods[i]] = createLazyMethod(methods[i]);
}
return res;
})();
console.log(obj.foobar.GetId()); // 23
With this solution, once foobar has been instantiated, calls to its methods come at zero cost.
What I had intended was to instantiate obj.foobar = new foobar() when obj.foobar.GetId() is called the first time
No, that doesn't work. If you call the getId method, there must already be an existing object. Either you define a getter function for the foobar property of the obj which creates the instance on accessing, or you just instantiate it before (as you did in your IEFE and could have shorter done with the assignment, as you said).
Usually, you would use a function (which could also be a constructor) that you call each time and that returns the singleton if it was already created, else it creates one and stores it:
var obj = {
foobar: (function iefe() {
var id, instance;
return function constructor() {
if (!instance) { // create it
id = 22;
instance = {
getId: function getID(){
return ++id;
}
};
}
return instance;
};
})();
};
obj.foobar().getId() // 23
obj.foobar().getId() // 24
If I have a javascript class that runs some initialization code, it seems logical to put this code at the top, and any methods at the bottom of the class. The problem is, if the initialization code contains a method call, I get a 'undefined' is not a function error. I imagine because the method is defined after the method call. How do people normally structure javascript classes to avoid this? Do they put all the initialization code at the end of the class? For example:
var class = function() {
this.start();
this.start = function() {
alert('foo');
};
};
var object = new class();
causes an error, while:
var class = function() {
this.start = function() {
alert('foo');
};
this.start();
};
var object = new class();
does not. what would be considered a good structure for a javascript object like this?
Here's what I would do
// create a "namespace"
var com = com || {};
com.domain = com.domain || {};
// add "class" defintion
com.domain.MyClass = function(){
var privateFields = {};
var publicFields = {};
privateFields.myFunction = function(){
// do something
}
publicFields.initialize = function(){
privateFields.myFunction();
}
return publicFields;
}
var myClass = new com.domain.MyClass();
myClass.initialize();
of course, you could just make initialize(); "private" and run it before return publicFields;
var class = function() {
this.start();
};
class.prototype.start = function() {
alert('foo');
};
var object = new class();
now you can mess around with start as much as you want in the constructor. but dont use the keyword class as it is a reserved word.
I like http://ejohn.org/blog/simple-javascript-inheritance/ where I feel much more programing OOP.
var myClass = Class.extend({
init: function () {
this.foo();
},
foo: function () {
alert("foo");
}
});
new myClass();
Consider making start a method on class's prototype. This has the bonus of saving memory since all instances of class can share the same start, instead of creating a new start function for each instance.
var class = function() {
this.start();
};
class.prototype.start = function() {
alert('foo');
};
var object = new class();
I actually work a lot with structures like this:
var foo = function() {
// Actual construction code...
start(); // <-- doesn't make a difference if functions are
privateMethod(); // public or private!
// ---------------------------------
function start() {
// ... whatever ...
};
function privateMethod() {
// ... whatever ...
};
// ---------------------------------
// Add all public methods to the object (if start() was only used internally
// just don't assign it to the object and it's private)
this.start = start;
};
I currently know two ways to construct singletons in JavaScript. First:
var singleton = {
publicVariable: "I'm public",
publicMethod: function() {}
};
It is perfect except that it does not have a constructor where I could run initialization code.
Second:
(function() {
var privateVariable = "I'm private";
var privateFunction = function() {}
return {
publicVariable: "I'm public",
publicMethod: function () {}
}
})();
The first version does not have private properties nor does it have a constructor, but it is faster and simpler. The second version is more complex, ugly, but has a constructor and private properties.
I'm not in a need for private properties, I just want to have a constructor. Is there something I am missing or are the two approaches above the only ones I've got?
function Singleton() {
if ( Singleton.instance )
return Singleton.instance;
Singleton.instance = this;
this.prop1 = 5;
this.method = function() {};
}
Here is my solution with closures:
function Singleton() {
Singleton.getInstance = (function(_this) {
return function() { return _this; };
})(this);
}
Test:
var foo = new Singleton();
var bar = Singleton.getInstance();
foo === bar; // true
If you are just looking for a place to initialise your singleton, how about this?
var singleton = {
'pubvar': null,
'init': function() {
this.pubvar = 'I am public!';
return this;
}
}.init();
console.assert(singleton.pubvar === 'I am public!');
Simple and elegant.
var singleton = new function() { // <<----Notice the new here
//constructorcode....
this.publicproperty ="blabla";
}
This is basically the same as creating a function, then instantly assiging a new instace of it to the variable singleton. Like var singleton = new SingletonObject();
I highly advice against using singletons this way in javscript though because of the execution order is based on where in the file you place the object and not on your own logic.
What about this?
var Singleton = (function() {
var instance;
// this is actual constructor with params
return function(cfg) {
if (typeof instance == 'undefined') {
instance = this;
this.cfg = cfg;
}
return instance;
};
})();
var a = new Singleton('a');
var b = new Singleton('b');
//a === b; <-- true
//a.cfg <-- 'a'
//b.cfg <-- 'a'
I make it an actual Singleton with static functions and no this like so:
class S {
//"constructor"
static init() {
//Note: Since it's a singleton, there's no "this" instance.
//Instead, you store variables directly on the class.
S.myVar = 7;
}
static myOtherFunc() {
alert(S.myVar);
}
}
//Immediately call init() to make it the "constructor".
//Alternatively, you can call init() elsewhere if you'd
//like to initialize it at a particular time.
S.init();
//Later:
S.myOtherFunc();
S.myVar = 10;
I need to extend a class, which is encapsulated in a closure. This base class is following:
var PageController = (function(){
// private static variable
var _current_view;
return function(request, new_view) {
...
// priveleged public function, which has access to the _current_view
this.execute = function() {
alert("PageController::execute");
}
}
})();
Inheritance is realised using the following function:
function extend(subClass, superClass){
var F = function(){
};
F.prototype = superClass.prototype;
subClass.prototype = new F();
subClass.prototype.constructor = subClass;
subClass.superclass = superClass.prototype;
StartController.cache = '';
if (superClass.prototype.constructor == Object.prototype.constructor) {
superClass.prototype.constructor = superClass;
}
}
I subclass the PageController:
var StartController = function(request){
// calling the constructor of the super class
StartController.superclass.constructor.call(this, request, 'start-view');
}
// extending the objects
extend(StartController, PageController);
// overriding the PageController::execute
StartController.prototype.execute = function() {
alert('StartController::execute');
}
Inheritance is working. I can call every PageController's method from StartController's instance. However, method overriding doesn't work:
var startCont = new StartController();
startCont.execute();
alerts "PageController::execute".
How should I override this method?
It doesn't work because StartController calls PageController which adds an execute property to your object, so the execute property of StartController.prototype is not used.
For your overriding to work, you have to either :
1) define PageController.prototype.execute as the execute method of PageController. It won't work because then the function doesn't have access to _current_view.
2) define StartController.execute in the object constructor :
var StartController = function(request){
// calling the constructor of the super class
StartController.superclass.constructor.call(this, request, 'start-view');
// overriding the PageController::execute
this.execute = function() {
alert('StartController::execute');
}
}
// extending the objects
extend(StartController, PageController);
edit:
So you want for StartController.execute to access _current_view, which is impossible as long as _current_view is part of a closure that StartController is not part of. You might have to proceed like this:
(function () {
var _current_view;
window.PageController = function(request, new_view) {
...
this.execute = function() { ... }
}
window.StartController = function(request) {
StartController.superclass.constructor.call(this, request, 'start-view');
this.execute = function() { ... }
}
extend(StartController, PageController);
}()
var startCont = new StartController();
startCont.execute();
And if you want some kind of protected behavior, you might want to try this trick:
(function() {
var token = {};
window.Class1 = function() {
this.protectedMethod = function(tok) {
if(tok != token) return; // unauthorized
...
}
}
window.Class2 = function() {
new Class1().protectedMethod(token); // access granted
}
})()
new Class1().protectedMethod(); // access denied
There's no such thing as a package in javascript, so your possibilities are limited. You can certainly not have any kind of privileges among functions/objects/constructors that are not part of the same script. None that I know of, at least. Except maybe querying a server for some kind of authorization.