Why refer to static variables (function properties) outside the function definition?

Question

I was looking at Static variables in JavaScript and I noticed something I'd seen before, that the function is defined and after the function definition the function prototype is updated:

function MyClass () { // constructor function
  //function definition here
}

//now add a (static?) method *outside* the function definition
MyClass.prototype.publicMethod = function () {
  alert(this.publicVariable);
};

//add a static property *outside* the function definition
MyClass.staticProperty = "baz";

Here's my question - why not define them inside the function defintion, like this:

  function MyFunc(){
    MyFunc.staticVar = 1;
    //static method showing static var
    MyFunc.showVarStatic  = function(){
        alert(MyFunc.staticVar);
    }
    //instance method referring to static var
    this.showVarInstance = function(){
        alert(MyFunc.staticVar);
    }
    //instance method - doesn't change static var
    this.inc1 = function(){
        this.staticVar += 1;//no such property
    }
    //static method, changes var
    this.inc2 = function(){
        MyFunc.staticVar += 1;//increments static property
    }
  }

This seems to behave as expected in IE8, FF, and Chrome. Is this just a personal preference / style thing? I like it, because my whole function is contained in those curly brackets.

[EDIT: after doing more reading and experimenting, I have better understand of how javascript functions are constructors, and how they differ from, for example, C# classes - here's some code I used to demonstrate this]

//this is deceiving, notSoStaticVar won't exist until MyFunc1 has been run
//and then it will be reset whenever MyFunc1 (a constructor) is run
function MyFunc1(){
    MyFunc1.notSoStaticVar = "I belong to MyFunc1";
    this.instanceVar = "I belong to instances of MyFunc1";
}

//this code will be run inline one time, 
//so the static property of MyFunc2 will exist
//(I like how all the functionality is in one code block, but it's kind of messy)
MyFunc2 = (function(){
    var temp = function(){
        this.instanceVar = "I belong to an instance of MyFunc2";
    }
    temp.staticVar = "I belong to MyFunc2";
    return temp;
})();

//this seems to be equivalent to MyFunc2, but the code is cleaner
MyFunc3 = function(){
}
MyFunc3.prototype.instanceVar = "I belong to an instance of MyFunc3";
MyFunc3.staticVar = "I belong to MyFunc3";

//tests
console.log(MyFunc1.notSoStaticVar);//undefined!
var a = new MyFunc1();
console.log(MyFunc1.notSoStaticVar);//"I belong to MyFunc1"
console.log(a.instanceVar);//"I belong to instances of MyFunc1"
MyFunc1.notSoStaticVar = "I will be changed when another instance of MyFunc1 is created";
console.log(MyFunc1.notSoStaticVar);//"I will be changed when another instance of MyFunc1 is created"
var b = new MyFunc1();
console.log(MyFunc1.notSoStaticVar);//"I belong to MyFunc1" - was reset by constructor!

//now test MyFunc2
console.log(MyFunc2.staticVar);//"I belong to MyFunc2"
MyFunc2.staticVar = "I am not affected by the construction of new MyFunc2 objects";
var c = new MyFunc2();
console.log(c.instanceVar);//"I belong to an instance of MyFunc2"
console.log(MyFunc2.staticVar);//"I am not affected by the construction of new MyFunc2 objects"

//now test MyFunc3
console.log(MyFunc3.staticVar);//"I belong to MyFunc3"
MyFunc3.staticVar = "I am not affected by the construction of new MyFunc3 objects";
var d = new MyFunc3();
console.log(d.instanceVar);//"I belong to an instance of MyFunc3"
console.log(MyFunc3.staticVar);//"I am not affected by the construction of new MyFunc3 objects"

//interesting
console.log(c);//"temp" <-- not really intuitive!
console.log(d);//"MyFunc3" <-- makes sense

From what you've written in the example, I think some clarification on how prototypes work might be helpful. Are you familiar with how prototypal inheritance works, or would it be helpful to get a quick overview? — Kevin Ennis, Jun 13 '12 at 03:39
I've read about prototypes, but never actually messed with them - and hadn't really thought hard about the relationship between prototypes and static variables (or methods). On further thought and experimentation, I can see how I can use a prototype and get lazy initialization of a sort of static variable, but that the variable will always be initialized by an instance... I'm coming at this from a C# perspective, and realizing some of the interesting differences. — Aerik, Jun 13 '12 at 07:09

score 2 · Answer 1 · answered Jun 13 '12 at 00:22

2

In short: performance.

Defining them inside the function will cause them to be redefined every single time you call the constructor.

While this will behave as expected, it's just overhead for no good reason.

answered Jun 13 '12 at 00:22

Joseph Silber

214,931
59
362
292

score 1 · Accepted Answer · answered Jun 13 '12 at 00:23

1

Because that will add unique functions to every object instance. This consumes additional memory overhead that often isn't necessary.

It can be useful in some cases, like when functions should reference local variables, but if that's not the situation, they should be on the prototype.

Also, the static ones will constantly be overwritten.

answered Jun 13 '12 at 00:23

in my example, isn't MyFunc.somevar the same as MyFunc.prototype.somevar? – Aerik Jun 13 '12 at 07:23
@Aerik: No. Functions are objects, so you can add properties directly to them, just like any other object. So what you're doing with `MyFunc.somevar` is adding a property directly to the function. It has no effect on objects *created* using that function. But adding properties like `MyFunc.prototype.somevar` makes the `somevar` property available to all objects created using `MyFunc`. – Jun 13 '12 at 14:24

Why refer to static variables (function properties) outside the function definition?

2 Answers2