object oriented javascript how to create a static class for constants

Question

I've decided to put all my constants in a neat class called constants, and would like to access its members with the dot operator.

So far I've tried:

function Constants(){
    Constants.style = {};
    Constants.style.border_sides = 20;
    Constants.style.button_width = 17;
    // ...
}

And later

Constants = new Constants();

and

{
    $('#button').width(Constants.style.button_width);
}

That resulted in a

Can't access button_width of undefined.

I would use JSON to declare the constants, but I like comments in my code. Would someone explain javascript's OO?

The object literal suits my purposes pretty well.

lowerkey
– lowerkey

2011-11-11 17:53:40 +00:00
Commented Nov 11, 2011 at 17:53 — lowerkey
– lowerkey, Commented Nov 11, 2011 at 17:53

Matt Greer · Accepted Answer · 2011-11-11 17:06:56Z

5

You replace the Constants function with an instance of Constants. And you applied your constants to the function, not an instance of Constants or the prototype. So you effectively wiped your constants away.

I'd argue just use an object literal

var constants = {
   style: {
        border_sides: 20
   }
};

Keep in mind there's nothing actually constant about either approaches. Anyone can easily change the "constant" values. If you want truly constant data, you might want to use getters/setters, Object.defineProperty or the module pattern.

answered Nov 11, 2011 at 17:06

Matt Greer

62.1k18 gold badges127 silver badges124 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Matt Greer Over a year ago

And nowadays, you can use const if you're environment supports EcmaScript 2015

Esailija · Accepted Answer · 2011-11-11 17:04:39Z

5

If you want a "class" with both static and instance methods:

function ClassName(){

}

ClassName.prototype = { //Put instance methods here
   instanceMethod1 : function(){},

   instanceMethod2 : function(){}
};

ClassName.staticMethod1 = function(){};
ClassName.staticMethod2 = function(){};

var a = new ClassName();

a.staticMethod1; //undefined
a.instanceMethod1; //function(){};

ClassName.staticMethod1 //function(){};

answered Nov 11, 2011 at 17:04

Esailija

140k24 gold badges280 silver badges328 bronze badges

2 Comments

lowerkey Over a year ago

So that's how I add static and instance methods, do instance and static variables work the same way?

Esailija Over a year ago

Hmm.. you can look at explanation for static members here: java.about.com/od/workingwithobjects/a/staticfields.htm It's in java (and yes I know javascript and java are vastly different types of languages) but it's the same principle

Abdul Munim · Accepted Answer · 2011-11-11 17:04:57Z

4

Why don't you just consider using literals?

var Constants = {
    style: {
        border_sides: 20,
        button_width: 17
    }
}

Even if you are willing to consider using the construction function, replace Constants with this

function Constants(){
    this.style = {};
    this.style.border_sides = 20;
    this.style.button_width = 17;
    // ...
}

You don't need to do any new Constants() for literals (1st example). Just start using right away.

For 2nd example (constructor function) you need to do var constants = new Constants().

answered Nov 11, 2011 at 17:04

Abdul Munim

19.2k8 gold badges54 silver badges61 bronze badges

Comments

Rich O'Kelly · Accepted Answer · 2011-11-11 17:03:25Z

2

In Javascript everyting is an object, so you're adding properties to the Constants function within the function.

To get the effect you want write:

var Constants = {
  someText: 'text1',
  someInt: 1
};

And to access, is simply:

var text = Constants.someText;

answered Nov 11, 2011 at 17:03

Rich O'Kelly

41.8k9 gold badges87 silver badges114 bronze badges

Collectives™ on Stack Overflow

object oriented javascript how to create a static class for constants

4 Answers 4

1 Comment

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related