Storing reusable constant in namespaces in JavaScript

Question

Please don't point me to Static variables in JavaScript

My question is more specific. I newbie to JS (just read a couple of books, see some screencasts, and read blog articles about monoins/monads in JS) so be patient ))

To storing reusable constants I write such code:

function SVGobj(w, h) {
    this.value = document.createElementNS(SVGobj.svgNS, "svg");
    this.value.setAttribute("version", "1.2");
    this.value.setAttribute("width", w);
    this.value.setAttribute("height", h);
}
SVGobj.svgNS = "http://www.w3.org/2000/svg";

function SVGCircle(cx, cy, r) {
    this.value = document.createElementNS(SVGobj.svgNS, "circle");
    this.value.setAttribute("cx", cx);
    this.value.setAttribute("cy", cy);
    this.value.setAttribute("r", r);
}

Above code is working. SVGCircle reuse constant SVGobj.svgNS.

But I don't understand SVGobj.svgNS = expression. Is that legal use of JS expressions according to JS spec?

Note that such code fail:

var SVGobj = {};
SVGobj.svgNS = "http://www.w3.org/2000/svg";
function SVGobj(w, h) {
    this.value = document.createElementNS(SVGobj.svgNS, "svg");
    this.value.setAttribute("version", "1.2");
    ...
}
....

with error:

TypeError: SVGobj.prototype is undefined

when I try instantiate new SVGobj(320, 240);

Why?

Can I create object by new operator but starting from "var Cls = {};" expression?

Someone suggest to use:

function SVGobj(w, h) {
    if (typeof SVGobj.svgNS == 'undefined' ) {
        SVGobj.svgNS = "http://www.w3.org/2000/svg";
    }
   ....
}

Why use if which evaluated each time I create object?? My first example seems more natural to me...

In comments to http://bsdev.blogspot.com/2011/02/static-variables-in-javascript.html people suggest my first solution... — gavenkoa, Jan 14 '13 at 07:58
So any **function SVGobj() {}** definition ignored? Or they must be illegal? — gavenkoa, Jan 14 '13 at 08:04

score 3 · Accepted Answer · answered Jan 14 '13 at 08:20

But I don't understand SVGobj.svgNS = expression. Is that legal use of JS expressions according to JS spec?

Yes it is, the SVGobj ist a function and svgNS is a property of the function.

when I try instantiate new SVGobj(320, 240); Why?

Is a Name conflict.

var SVGobj = {}; SVGobj.svgNS = "http://www.w3.org/2000/svg";

is overridden by:

function SVGobj(w, h) { this.value = document.createElementNS(SVGobj.svgNS, "svg"); this.value.setAttribute("version", "1.2"); ... }

Dont forget Javascript is not a ObjectOriented language.

Can I create object by new operator but starting from "var Cls = {};" expression?

This expression is equal to ({} is only a short cut)

var Cls = new Object();

Why use if which evaluated each time I create object?? My first example seems more natural to me...

The first example is better than the if solution, but the code could be cleaner.(but it always can. ;-)

Thanks for answering to all my questions. +1 – gavenkoa Jan 14 '13 at 08:27 — gavenkoa, Jan 14 '13 at 08:27

Cerbrus · Answer 2 · 2013-01-14T09:27:47.783

2

In this code:

var SVGobj = {};
SVGobj.svgNS = "http://www.w3.org/2000/svg";
function SVGobj(w, h) {
    this.value = document.createElementNS(SVGobj.svgNS, "svg");
    this.value.setAttribute("version", "1.2");
    ...
}

You're overriding:

var SVGobj = {};

With:

function SVGobj(w, h) {

SVGobj.svgNS no longer exists then.

You may want to do something like:

SVGobj = function (w, h) {
    this.value = document.createElementNS(this.svgNS, "svg");
    this.value.setAttribute("version", "1.2");
    this.svgNS = "http://www.w3.org/2000/svg";

    return {
        svgNS: this.svgNS
    };
};

var o = new SVGobj(100, 100)
console.log(o.svgNS);
// http://www.w3.org/2000/svg

edited Jan 14 '13 at 09:27

answered Jan 14 '13 at 08:06

Cerbrus

70,800
18
132
147

Hm... Never see **return {...}** construction in JS "constructors". What is the trick? – gavenkoa Jan 14 '13 at 11:09
The trick is that the object returned from `new SVGobj(100, 100)` now also has a property `svgNS`, that refers to the internal `this.svgNS` property. – Cerbrus Jan 14 '13 at 11:51
Hm... in that case code **console.log(SVGobj.svgNS);** return undefined... (( My goal is to store data in way that it will be reusable by other modules and classes without instantiating SVGobj... – gavenkoa Jan 14 '13 at 12:03

Storing reusable constant in namespaces in JavaScript

2 Answers2