How to create singleton classes in Javascript? - javascript

I am working on a large project where I have multiple managers to handle different tasks, I need an only a single object of these managers to be created when I start the app,
I came across this method of Singleton creation
class QuestionnaireManager {
constructor() {
if (this.instance) {
return;
}
this.instance = this;
}
}
Is this an acceptable way, is there any downside, I am coming from JAVA Kotlin background and this seems to simple to be true where we have so much to deal in case of singletons in other languages. (Most of those cases have to deal with multi-threading but as JS is single-threaded so I think this would be sufficient way)
Still need opinion on best practices, or any other Dependency Injection methods where we don't even rely on Singleton but create the object once and reuse all over the project with dependency injections.
I would like to know the opinion of sensie in JS.

That ain't the right way to implement Singleton in ES6. The correct way:
class QuestionnaireManager {
constructor() {
if (QuestionnaireManager._instance) {
throw new Error("Singleton classes can't be instantiated more than once.")
}
QuestionnaireManager._instance = this;
// ... your rest of the constructor code goes after this
}
}
var managerOne = new QuestionnaireManager()
var managerTwo = new QuestionnaireManager() // Throws error
Or, if you don't want an error to be thrown on second instance creation you can just return the last instance, like so:
class QuestionnaireManager {
constructor() {
if (QuestionnaireManager._instance) {
return QuestionnaireManager._instance
}
QuestionnaireManager._instance = this;
// ... your rest of the constructor code goes after this
}
}
var managerOne = new QuestionnaireManager()
var managerTwo = new QuestionnaireManager()
console.log(managerOne === managerTwo) // logs "true"

// Singleton.js
class Singleton {
constructor(){
if(Singleton._instance){
console.warn("already created!");
return Singleton._instance;
}
Singleton._instance = this;
console.log("singleton created");
this._createdTime = new Date();
}
static instance() {
if(!Singleton._instance){
return new Singleton();
}
return Singleton._instance;
}
createdTime() {
return this._createdTime.toISOString();
}
}
Singleton._instance = null;
export default Singleton;
// main.js
import Singleton from "./Singleton"
const a = new Singleton();
const b = new Singleton();
const c = Singleton.instance();
console.log(a.createdTime());
console.log(b.createdTime());
console.log(c.createdTime());
Output would be

In javascript you can export an instance of a class to make a singleton
// questionnaire-manager.js
class QuestionnaireManager {
constructor() {
}
}
module.exports = new QuestionnaireManager()
Then when you call require('questionnaire-manager') you'll always get the same instance.

Like Mikel B.'s answer only in a shorter syntax
module.exports = new class foo {..}

You need a static property, not instance property this.instance. It will be accessable by QuestionnaireManager.instance reference. But... it is sooo rare case to implement classical GOF singleton in Javascript... kind of enforcing yourself to develop UI in vim and feel yoursefl as "true develper" :)

Related

reset typescript singleton instance in each unit test

I have a typescript singleton class like so:
export default class MySingleton {
private constructor({
prop1,
prop2,
...
}: MySingletonConfig) {
this.prop1 = prop1 ?? 'defaultProp1';
this.prop2 = prop2;
this.prop3 = prop3 ?? 'defaultProp3';
/* ... some instruction ... */
MySingleton.instance = this;
}
static getInstance(params?: Configuration): MySingleton {
if (!this.instance && !params) {
throw MySingleton.instantiationError;
}
if (!this.instance) {
new MySingleton(params);
return this.instance;
}
return this.instance;
}
}
When I want to unit test it using jest, like so:
describe('getInstance()', () => {
test('it should return the same instance every time', () => {
const params = {
/* ... all the params ... */
};
const mySingleton = MySingleton.getInstance(params);
expect(MySingleton.getInstance()).toEqual(mySingleton);
});
test('it should return the instance with the default value', () => {
const params = {
/* ... ONLY THE REQUIRED PARAMS ... */
};
const mySingleton = MySingleton.getInstance(params);
expect(mySingleton.prop1).toEqual('defaultProp1');
expect(mySingleton.prop3).toEqual('defaultProp3');
});
});
This is failing, because we share the same instance between the 2 tests (as the singleton pattern work), therefore the second instantiation is useless.
Is there a way to reset/destroy the previous instantiation in order to properly check if those default values are properly setted with the second intantiation?
I don't see why you couldn't do:
MySingleton.instance = null;
const mySingleton = MySingleton.getInstance(params);
Ideally the istance property should be really private, but nobody prevents you from adding a reset() method on your class.
It is not particularly neat, as it would basically be for testing purposes only, but at least it would be more close to the canonical implementation of the singleton pattern.
That being said, I would carefully consider if using a singleton is a good idea. It might create a lot of headaches when unit testing your code.
Basically, the same problem you have here could present itself elsewhere when you try to test some code that makes use of your singleton.

TypeScript: Factory pattern to use dynamic imports is not allowing to construct new instance of the object for composition

I am implementing factory pattern in Typescript with dynamic imports so that I can initialize the load, initialize (with necessary composition) of the demanded module on run-time.
I am able to load the module dynamically on demand as https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-4.html
However it is not allowing me to initialize the loaded module.
Though in developer console I can do the initialization and even compose it seamlessly by initializing its sub-modules and classes composed in the module.
Struggling a lot to find this solution and tried out many things but didn't get it solved. In C# we can do it using reflection and create instance of libraries and classes as lazy loading without getting direct reference to them.
The error I am getting is "// Cannot use 'new' with an expression whose type lacks a call or construct signature.ts(2351)" when I am doing
let y: Interfaces.IComponent = new comp();
to construct it and assign it to varebale with type of interface of the that object is implementing.
same for the parent class type that component is extending
let x: ComponentImpl = new comp();
Please have a look at the code of typescript below.
import { Interfaces } from 'shared';
import { ComponentImpl } from 'core';
export default class Factory {
private _loadedModules: Map<string, Interfaces.IComponent> = new Map<string, Interfaces.IComponent>();
private static _instace: Factory;
private constructor() {
}
public static get Instance(): Factory {
return this._instace || (this._instace = new this());
}
public getComponent(component: string): Promise<Interfaces.IComponent> {
return new Promise<Interfaces.IComponent>(async (resolve, reject) => {
let comp = this._loadedModules.get(component);
if (comp !== null) {
comp = await import(`./${component}`);
if (comp) {
// ----------------------------------------------------------------------------
// ** NOTE: On run time I can see the module is loaded corrctly and I can initialze its sub classes in developer console.
// like controller = new comp.controller(); (get console log from constructor)
// controller.sayHello();
// controller.setAPIInstance(new comp.getAPI());
// controller.saveToAPI();
let y: Interfaces.IComponent = new comp(); // Cannot use 'new' with an expression whose type lacks a call or construct signature.ts(2351)
let x: ComponentImpl = new comp(); // Cannot use 'new' with an expression whose type lacks a call or construct signature.ts(2351)
this._loadedModules.set(component, comp);
resolve(comp);
} else {
reject("Unable lo load module");
}
} else {
setTimeout(() => {
resolve(comp);
}, 1);
}
});
}
}
You can try out the following solution which worked in my case:
let x: ComponentImpl = new (comp as typeof ComponentImpl )()
See also this ticket from TypeScript: https://github.com/Microsoft/TypeScript/issues/2081

How to instantiate a Class from a String in JavaScript

I'm in a weird situation that i need to instantiate a new Class with a string stored in a variable but even i'm sure the class name is correct i get an error that given class name is not a constructor
Here is a dummy code that doesn't work:
class Foo {
constructor(){
console.log('Foo!');
}
};
const foo = 'Foo';
const bar = new window[foo]();
console.log(bar);
This trow this error:
Uncaught TypeError: window[foo] is not a constructor
One possibility is to use eval.
class Foo {
constructor() {
console.log('Foo!');
}
};
const foo = 'Foo';
const bar = eval(`new ${foo}()`);
console.log(bar);
You will have to evaluate the safety of using eval() in your particular circumstances. If you know the origin of the string you are inserting into the code that you run eval() on or you can sanitize it first, then it may be safe.
I personally would prefer a lookup table. If you have a known number of classes that you want to map by string, then you can make your own lookup table and use that. This has the advantage of there can be no unintended consequences if the string has weird stuff in it:
class Foo {
constructor() {
console.log('Foo!');
}
};
class Goo {
constructor() {
console.log('Goo!');
}
};
// construct dict object that contains our mapping between strings and classes
const dict = new Map([
['Foo', Foo],
['Goo', Goo]
]);
// make a class from a string
const foo = 'Foo';
let bar = new(dict.get(foo))()
console.log(bar);
If you were really going to go this route, you may want to encapsulate it in a function and then add error handling if the string is not found in the dict.
This should be better than using the global or Window object as your lookup mechanism for a couple reasons:
If I recall, class definitions in ES6 are not automatically put on the global object like they would with other top level variable declarations (Javascript trying to avoid adding more junk on top of prior design mistakes).
So, if you're going to manually assign to a lookup object, you might as well use a different object and not pollute the global object. That's what the dict object is used for here.
Similar to #jfriend00 ...
const className = "Foo";
const dynamicConstructor = {};
dynamicConstructor[className] = class {
constructor() {
console.log('Foo!');
}
};
const fooInstance = new dynamicConstructor[className]();
console.log(fooInstance);
A sort of factory class constructor can also be used
const classFactory = (_className) => {
let dynamicConstructor = {};
dynamicConstructor[_className] = class {
constructor(_code) {
this.code = _code;
console.log(`${_className} initialised with code: ${_code}!`);
}
};
return dynamicConstructor[_className];
}
const MyClass = classFactory("Foo");
let fooInstance2 = new MyClass(123);
console.debug(fooInstance2);
There are good solutions but I think we need a little bit more of theory
This questions is the best example to use a Factory Pattern
Design patterns can make your code more flexible, more resilient to change and easier to maintain.
Teo, is possible to use Factory Patterns in JavaScript?
Yes, my young Padawan.
But, what is the Factory pattern?
The factory pattern is a creational design pattern, which means it deals with object creation. There are three theoretical types of factory patterns:
Simple factory
Factory method
Abstract factory
Simple Factory is an object which encapsulates the creation of another object. In ES6 it could be a constructor being instantiated by new in a function and then return the instance like this:
class Player {...}
const PlayerFactory = {
makePlayer: (type, level) => new Player(type, level),
}
In this example makePlayer returns the instance of the Player class.
Factory Method defines one method for creating a class instance, which is overridden by subclasses who decide what to return.
In ES6 it could be implemented extending classes because there are no interfaces and using a method to instantiate and object using new
class Dragon {...}
class Snake {...}
class Player {
fightMonster() {
const monster = this.makeMonster()
monster.attack()
}
}
class Warrior extends Player {
makeMonster() {
return new Dragon()
}
}
class Knight extends Player {
makeMonster() {
return new Snake()
}
}
In this example, Player class call makeMonster method then Warrior and Knight classes override makeMoster method to return either a Dragon or a Snake class instance.
Finally, the Abstract Factory provides an interface for creating families of related or dependent objects without specifying their concrete classes
The interpretation of families could be like a category or list of classes. In ES6 it can be an instance that encapsulates a group of individual factories with a common goal. It separates the details of implementation of a set of objects from their general usage.
class WinButton {
constructor(options) {
this.name = 'WinButton'
this.options = options
}
}
class LinuxButton {
constructor(v) {
this.name = 'LinuxButton'
this.options = options
}
}
// Mapping names and class definitions
const supportedOS = new Map([
['Windows', WinButton],
['Linux', LinuxButton]
])
// Use a Factory Abstract pattern
const classFactory = (c, v) => {
const maker = supportedOS.get(c)
return new(maker)(v)
}
// Factory a class from a string
const name = 'Windows'
const param = {enabled: true}
const btn = classFactory(name, param)
console.log({btn})
In this final example we can see that the function classFactory uses the Factory Abstract pattern because instantiate a class from a list of supported OS (Linux or Windows) by setting maker with the constructor of the desired class, in this case WinButton class.

How can I properly organize my JS code into a more traditional class structure?

I'm struggling with my JS code structure that's becoming apparent during my unit testing attempts. I'm used to the class structure, but I'm a bit lost in the JS world where there aren't any classes. I'm looking for a way to organize my code in the traditional class/constructor architecture. Here's what I have:
function ddGridSelector(primaryId, templateDefault, gridObj) {
//set the variables
this.primaryId = primaryId,
this.defaultTemplate = templateDefault,
this.gridObj = gridObj,
this.gridObj.searchVal = '',
this.init = ddgs_init
}
function ddgs_init(ddgs_obj) {
ddgs_setDefaultTemplate(ddgs_obj);
ddgs_initGrid(ddgs_obj);
ddgs_initKendoWindow(ddgs_obj);
ddgs_initKendoButton(ddgs_obj);
ddgs_initResetButton(ddgs_obj);
ddgs_addGridEventListener(ddgs_obj);
}
function ddgs_setDefaultTemplate(ddgs_obj) {
//doing stuff
}
function ddgs_initGrid(ddgs_obj) {
//more stuff
}
To call any of these...
var ddGridSelector_new = new ddGridSelector('PrimaryIdentifier', templateDefault, gridObj);
ddGridSelector_new.init(ddGridSelector_new);
It seems really redundant to pass my object to my function that's specified in my constructor so I'm sure I'm missing something obvious here. Really would appreciate some guidance on the matter. I think I'm close to being on a good path.
ES5 Way
You can do "functional classes" like this, which are pretty self explainable:
function User(name) {
// name is thus "private" here because it's
// not put under "this.name"
this.sayHi = function() {
alert(name);
};
}
let user = new User("John");
user.sayHi(); // John
There's also the prototype class pattern as well:
function User(name, birthday) {
this._name = name;
}
User.prototype.sayHi = function() {
alert(this._name);
};
let user = new User("John");
user.sayHi(); // John
Source/Tutorial with the examples listed here
ES6+ Way
In ES6 you can declare classes in a way that looks more like traditional programming languages:
class User {
constructor(name) {
this.name = name;
}
sayHi() {
alert(this.name);
}
}
let user = new User("John");
user.sayHi(); // John
However you will need a transplier like Babel or Typescript to compile it down to web compatible code if you are targeting platforms such as IE (all versions), Opera Mini, and the Android Browser (4.4.x, ~16% of all Android versions in the field) (web compat sources), or things such as Cordova on older iOS devices (< 10, UIWebView, etc).
Node.js should have support for classes from 4.8.4(!) and above, surprisingly enough (source).
but I'm a bit lost in the JS world where there aren't any classes.
But... there are!
class ddGridSelector {
constructor(primaryId, templateDefault, gridObj) {
//set the variables
this.primaryId = primaryId,
this.defaultTemplate = templateDefault,
this.gridObj = gridObj,
this.gridObj.searchVal = '',
}
init() {
this.setDefaultTemplate();
this.initGrid();
this.initKendoWindow();
this.initKendoButton();
this.initResetButton();
this.addGridEventListener();
}
setDefaultTemplate() {
//doing stuff
}
initGrid() {
//more stuff
}
}
I tend to love this structure for a class-like layout when I want to avoid new features. It gives you a private scope where you can scope functions and shared variables as you need them and lets you separate out a "constructor" and public methods on the prototype.
var MyType = (function () {
function MyType() {
//My Constructor
}
MyType.prototype = {
constructor: MyType,
publicMethod: privateMethod
};
function privateMethod() {
...
}
return MyType;
}());
The outer scope runs immediately and keeps the global namespace clean. We augment the private function with prototype instance methods, define any "private" methods needed, and return the private type after setup. This lets you instantiate a class like normal and call any methods.
var example = new MyType();
example.publicMethod();

Class variable using Class syntax in Javascript [duplicate]

Currently in ES5 many of us are using the following pattern in frameworks to create classes and class variables, which is comfy:
// ES 5
FrameWork.Class({
variable: 'string',
variable2: true,
init: function(){
},
addItem: function(){
}
});
In ES6 you can create classes natively, but there is no option to have class variables:
// ES6
class MyClass {
const MY_CONST = 'string'; // <-- this is not possible in ES6
constructor(){
this.MY_CONST;
}
}
Sadly, the above won't work, as classes only can contain methods.
I understand that I can this.myVar = true in constructor…but I don't want to 'junk' my constructor, especially when I have 20-30+ params for a bigger class.
I was thinking of many ways to handle this issue, but haven't yet found any good ones. (For example: create a ClassConfig handler, and pass a parameter object, which is declared separately from the class. Then the handler would attach to the class. I was thinking about WeakMaps also to integrate, somehow.)
What kind of ideas would you have to handle this situation?
2018 update:
There is now a stage 3 proposal - I am looking forward to make this answer obsolete in a few months.
In the meantime anyone using TypeScript or babel can use the syntax:
varName = value
Inside a class declaration/expression body and it will define a variable. Hopefully in a few months/weeks I'll be able to post an update.
Update: Chrome 74 now ships with this syntax working.
The notes in the ES wiki for the proposal in ES6 (maximally minimal classes) note:
There is (intentionally) no direct declarative way to define either prototype data properties (other than methods) class properties, or instance property
Class properties and prototype data properties need be created outside the declaration.
Properties specified in a class definition are assigned the same attributes as if they appeared in an object literal.
This means that what you're asking for was considered, and explicitly decided against.
but... why?
Good question. The good people of TC39 want class declarations to declare and define the capabilities of a class. Not its members. An ES6 class declaration defines its contract for its user.
Remember, a class definition defines prototype methods - defining variables on the prototype is generally not something you do.
You can, of course use:
constructor(){
this.foo = bar
}
In the constructor like you suggested. Also see the summary of the consensus.
ES7 and beyond
A new proposal for ES7 is being worked on that allows more concise instance variables through class declarations and expressions - https://esdiscuss.org/topic/es7-property-initializers
Just to add to Benjamin's answer — class variables are possible, but you wouldn't use prototype to set them.
For a true class variable you'd want to do something like the following:
class MyClass {}
MyClass.foo = 'bar';
From within a class method that variable can be accessed as this.constructor.foo (or MyClass.foo).
These class properties would not usually be accessible from to the class instance. i.e. MyClass.foo gives 'bar' but new MyClass().foo is undefined
If you want to also have access to your class variable from an instance, you'll have to additionally define a getter:
class MyClass {
get foo() {
return this.constructor.foo;
}
}
MyClass.foo = 'bar';
I've only tested this with Traceur, but I believe it will work the same in a standard implementation.
JavaScript doesn't really have classes. Even with ES6 we're looking at an object- or prototype-based language rather than a class-based language. In any function X () {}, X.prototype.constructor points back to X.
When the new operator is used on X, a new object is created inheriting X.prototype. Any undefined properties in that new object (including constructor) are looked up from there. We can think of this as generating object and class properties.
Babel supports class variables in ESNext, check this example:
class Foo {
bar = 2
static iha = 'string'
}
const foo = new Foo();
console.log(foo.bar, foo.iha, Foo.bar, Foo.iha);
// 2, undefined, undefined, 'string'
In your example:
class MyClass {
const MY_CONST = 'string';
constructor(){
this.MY_CONST;
}
}
Because of MY_CONST is primitive https://developer.mozilla.org/en-US/docs/Glossary/Primitive we can just do:
class MyClass {
static get MY_CONST() {
return 'string';
}
get MY_CONST() {
return this.constructor.MY_CONST;
}
constructor() {
alert(this.MY_CONST === this.constructor.MY_CONST);
}
}
alert(MyClass.MY_CONST);
new MyClass
// alert: string ; true
But if MY_CONST is reference type like static get MY_CONST() {return ['string'];} alert output is string, false. In such case delete operator can do the trick:
class MyClass {
static get MY_CONST() {
delete MyClass.MY_CONST;
return MyClass.MY_CONST = 'string';
}
get MY_CONST() {
return this.constructor.MY_CONST;
}
constructor() {
alert(this.MY_CONST === this.constructor.MY_CONST);
}
}
alert(MyClass.MY_CONST);
new MyClass
// alert: string ; true
And finally for class variable not const:
class MyClass {
static get MY_CONST() {
delete MyClass.MY_CONST;
return MyClass.MY_CONST = 'string';
}
static set U_YIN_YANG(value) {
delete MyClass.MY_CONST;
MyClass.MY_CONST = value;
}
get MY_CONST() {
return this.constructor.MY_CONST;
}
set MY_CONST(value) {
this.constructor.MY_CONST = value;
}
constructor() {
alert(this.MY_CONST === this.constructor.MY_CONST);
}
}
alert(MyClass.MY_CONST);
new MyClass
// alert: string, true
MyClass.MY_CONST = ['string, 42']
alert(MyClass.MY_CONST);
new MyClass
// alert: string, 42 ; true
Since your issue is mostly stylistic (not wanting to fill up the constructor with a bunch of declarations) it can be solved stylistically as well.
The way I view it, many class based languages have the constructor be a function named after the class name itself. Stylistically we could use that that to make an ES6 class that stylistically still makes sense but does not group the typical actions taking place in the constructor with all the property declarations we're doing. We simply use the actual JS constructor as the "declaration area", then make a class named function that we otherwise treat as the "other constructor stuff" area, calling it at the end of the true constructor.
"use strict";
class MyClass
{
// only declare your properties and then call this.ClassName(); from here
constructor(){
this.prop1 = 'blah 1';
this.prop2 = 'blah 2';
this.prop3 = 'blah 3';
this.MyClass();
}
// all sorts of other "constructor" stuff, no longer jumbled with declarations
MyClass() {
doWhatever();
}
}
Both will be called as the new instance is constructed.
Sorta like having 2 constructors where you separate out the declarations and the other constructor actions you want to take, and stylistically makes it not too hard to understand that's what is going on too.
I find it's a nice style to use when dealing with a lot of declarations and/or a lot of actions needing to happen on instantiation and wanting to keep the two ideas distinct from each other.
NOTE: I very purposefully do not use the typical idiomatic ideas of "initializing" (like an init() or initialize() method) because those are often used differently. There is a sort of presumed difference between the idea of constructing and initializing. Working with constructors people know that they're called automatically as part of instantiation. Seeing an init method many people are going to assume without a second glance that they need to be doing something along the form of var mc = MyClass(); mc.init();, because that's how you typically initialize. I'm not trying to add an initialization process for the user of the class, I'm trying to add to the construction process of the class itself.
While some people may do a double-take for a moment, that's actually the bit of the point: it communicates to them that the intent is part of construction, even if that makes them do a bit of a double take and go "that's not how ES6 constructors work" and take a second looking at the actual constructor to go "oh, they call it at the bottom, I see", that's far better than NOT communicating that intent (or incorrectly communicating it) and probably getting a lot of people using it wrong, trying to initialize it from the outside and junk. That's very much intentional to the pattern I suggest.
For those that don't want to follow that pattern, the exact opposite can work too. Farm the declarations out to another function at the beginning. Maybe name it "properties" or "publicProperties" or something. Then put the rest of the stuff in the normal constructor.
"use strict";
class MyClass
{
properties() {
this.prop1 = 'blah 1';
this.prop2 = 'blah 2';
this.prop3 = 'blah 3';
}
constructor() {
this.properties();
doWhatever();
}
}
Note that this second method may look cleaner but it also has an inherent problem where properties gets overridden as one class using this method extends another. You'd have to give more unique names to properties to avoid that. My first method does not have this problem because its fake half of the constructor is uniquely named after the class.
As Benjamin said in his answer, TC39 explicitly decided not to include this feature at least for ES2015. However, the consensus seems to be that they will add it in ES2016.
The syntax hasn't been decided yet, but there's a preliminary proposal for ES2016 that will allow you to declare static properties on a class.
Thanks to the magic of babel, you can use this today. Enable the class properties transform according to these instructions and you're good to go. Here's an example of the syntax:
class foo {
static myProp = 'bar'
someFunction() {
console.log(this.myProp)
}
}
This proposal is in a very early state, so be prepared to tweak your syntax as time goes on.
What about the oldschool way?
class MyClass {
constructor(count){
this.countVar = 1 + count;
}
}
MyClass.prototype.foo = "foo";
MyClass.prototype.countVar = 0;
// ...
var o1 = new MyClass(2); o2 = new MyClass(3);
o1.foo = "newFoo";
console.log( o1.foo,o2.foo);
console.log( o1.countVar,o2.countVar);
In constructor you mention only those vars which have to be computed.
I like prototype inheritance for this feature -- it can help to save a lot of memory(in case if there are a lot of never-assigned vars).
[Long thread, not sure if its already listed as an option...].
A simple alternative for contsants only, would be defining the const outside of class.
This will be accessible only from the module itself, unless accompanied with a getter.
This way prototype isn't littered and you get the const.
// will be accessible only from the module itself
const MY_CONST = 'string';
class MyClass {
// optional, if external access is desired
static get MY_CONST(){return MY_CONST;}
// access example
static someMethod(){
console.log(MY_CONST);
}
}
ES7 class member syntax:
ES7 has a solution for 'junking' your constructor function. Here is an example:
class Car {
wheels = 4;
weight = 100;
}
const car = new Car();
console.log(car.wheels, car.weight);
The above example would look the following in ES6:
class Car {
constructor() {
this.wheels = 4;
this.weight = 100;
}
}
const car = new Car();
console.log(car.wheels, car.weight);
Be aware when using this that this syntax might not be supported by all browsers and might have to be transpiled an earlier version of JS.
Bonus: an object factory:
function generateCar(wheels, weight) {
class Car {
constructor() {}
wheels = wheels;
weight = weight;
}
return new Car();
}
const car1 = generateCar(4, 50);
const car2 = generateCar(6, 100);
console.log(car1.wheels, car1.weight);
console.log(car2.wheels, car2.weight);
You can mimic es6 classes behaviour... and use your class variables :)
Look mum... no classes!
// Helper
const $constructor = Symbol();
const $extends = (parent, child) =>
Object.assign(Object.create(parent), child);
const $new = (object, ...args) => {
let instance = Object.create(object);
instance[$constructor].call(instance, ...args);
return instance;
}
const $super = (parent, context, ...args) => {
parent[$constructor].call(context, ...args)
}
// class
var Foo = {
classVariable: true,
// constructor
[$constructor](who){
this.me = who;
this.species = 'fufel';
},
// methods
identify(){
return 'I am ' + this.me;
}
}
// class extends Foo
var Bar = $extends(Foo, {
// constructor
[$constructor](who){
$super(Foo, this, who);
this.subtype = 'barashek';
},
// methods
speak(){
console.log('Hello, ' + this.identify());
},
bark(num){
console.log('Woof');
}
});
var a1 = $new(Foo, 'a1');
var b1 = $new(Bar, 'b1');
console.log(a1, b1);
console.log('b1.classVariable', b1.classVariable);
I put it on GitHub
Still you can't declare any classes like in another programming languages. But you can create as many class variables. But problem is scope of class object. So According to me, Best way OOP Programming in ES6 Javascript:-
class foo{
constructor(){
//decalre your all variables
this.MY_CONST = 3.14;
this.x = 5;
this.y = 7;
// or call another method to declare more variables outside from constructor.
// now create method level object reference and public level property
this.MySelf = this;
// you can also use var modifier rather than property but that is not working good
let self = this.MySelf;
//code .........
}
set MySelf(v){
this.mySelf = v;
}
get MySelf(v){
return this.mySelf;
}
myMethod(cd){
// now use as object reference it in any method of class
let self = this.MySelf;
// now use self as object reference in code
}
}
If its only the cluttering what gives the problem in the constructor why not implement a initialize method that intializes the variables. This is a normal thing to do when the constructor gets to full with unnecessary stuff. Even in typed program languages like C# its normal convention to add an Initialize method to handle that.
Just define a getter.
class MyClass
{
get MY_CONST () { return 'string'; }
constructor ()
{
console.log ("MyClass MY_CONST:", this.MY_CONST);
}
}
var obj = new MyClass();
The way I solved this, which is another option (if you have jQuery available), was to Define the fields in an old-school object and then extend the class with that object. I also didn't want to pepper the constructor with assignments, this appeared to be a neat solution.
function MyClassFields(){
this.createdAt = new Date();
}
MyClassFields.prototype = {
id : '',
type : '',
title : '',
createdAt : null,
};
class MyClass {
constructor() {
$.extend(this,new MyClassFields());
}
};
-- Update Following Bergi's comment.
No JQuery Version:
class SavedSearch {
constructor() {
Object.assign(this,{
id : '',
type : '',
title : '',
createdAt: new Date(),
});
}
}
You still do end up with 'fat' constructor, but at least its all in one class and assigned in one hit.
EDIT #2:
I've now gone full circle and am now assigning values in the constructor, e.g.
class SavedSearch {
constructor() {
this.id = '';
this.type = '';
this.title = '';
this.createdAt = new Date();
}
}
Why? Simple really, using the above plus some JSdoc comments, PHPStorm was able to perform code completion on the properties. Assigning all the vars in one hit was nice, but the inability to code complete the properties, imo, isn't worth the (almost certainly minuscule) performance benefit.
Well, you can declare variables inside the Constructor.
class Foo {
constructor() {
var name = "foo"
this.method = function() {
return name
}
}
}
var foo = new Foo()
foo.method()
Recent browsers as of 2021 (not IE, see MDN browser chart) implement Public class fields which seems to be what you're looking for:
class MyClass {
static foo = 3;
}
console.log(MyClass.foo);
However apparently it's not possible to make this a const: Declaring static constants in ES6 classes?
A static getter looks pretty close:
class MyClass {
static get CONST() {
return 3;
}
}
MyClass.CONST = 4; // property unaffected
console.log(MyClass.CONST);
This is a bit hackish combo of static and get works for me
class ConstantThingy{
static get NO_REENTER__INIT() {
if(ConstantThingy._NO_REENTER__INIT== null){
ConstantThingy._NO_REENTER__INIT = new ConstantThingy(false,true);
}
return ConstantThingy._NO_REENTER__INIT;
}
}
elsewhere used
var conf = ConstantThingy.NO_REENTER__INIT;
if(conf.init)...

Categories