What is the difference between these 2 javascript?

Question

I have been using Javascript but more in a procedural way not the object oriented way. Recently, I am just getting started to learn Javascript in a OOP manner. Can anybody tell what is the difference between:

var foo = {
 method1 : function(){
 }
}

and

var foo = function(){
 method: function(){
 }
}

Are both of these same or is the 1st one static class? If both are same then my 2nd question is how do I write methods and call it statically?

Answer 1

In the first case, you define an object using an object literal. From the view of OOP, it is a singleton.

var myObject = {
 field: value,
 method: function() { }
}

The other one is syntactically incorrect. What that code probably wanted to resemble, however, is a constructor.

var myConstructor = function() {
 this.field = value;
 this.method = function() {};
}

If this myConstructor is called with the new keyword,

• a new object will be created
• myConstructor will run with this set to reference this new object, so the field and method properties will get appended to it
• the new object will be returned

Example:

var myObject = new myConstructor();

Every new instance of object constructed by myConstructor() will receive its own copy of the function method. This is way prototype is usually used to store functions, but that is out of the scope of this question.

As for the static methods, a possibility is to add it directly to the constructor. This is possible, because functions are objects too in JS. Imagine this example.

var myConstructor = function() {
 // keep track of this instance
 myConstructor.addInstance(this);
}
myConstructor.instances = new Array();
myConstructor.addInstance = function(obj) {
 myConstructor.instances.push(obj);
}
myConstructor.getInstances = function() {
 return myConstructor.instances;
}
var myObject1 = new myConstructor();
var myObject2 = new myConstructor();
alert(myConstructor.getInstances()); // [object Object],[object Object]

In this case, the constructor contains an array of all existing instances and methods to manipulate it. These fields and methods may be considered static properties of myConstructor, because they are included in the constructor (which substitutes classes of the classical OOP) itself and no instantiation is needed to access them.

• Tim Tom: I like your answer. Thank you. However can you please explain what you mean by "will receive its own copy of the function method"? Aren't functions loaded only once in memory?
• Imp: @TimTom In this case, no. You can have fields and methods in the prototype to share them between all the object instances (myConstructor.prototype.method = function() { ... }). However, if you do it like in my example, every time the constructor is called, the line this.method = function() {}; is executed and a new function is added to the constructed object. Every field that is not in the prototype, but directly in the object belongs to that object only.

Answer 2

The major difference between them is that the second one is incorrect and makes no sense. If you run it you see SyntaxError: Unexpected token (

Answer 3

The first one could be considered a static class, e.g. you can call foo.method1().

The second one is just plain wrong and will cause a syntax error.

One way to write static classes for reuse is by using the module pattern:

var Foo = (function() {
 var private_variable = 1;
 function private_function() {
 return private_variable + 5;
 }
 return {
 get_private_variable: function() { return private_variable; },
 run_private_function: function() { return private_function(); }
 }
}());
Foo.get_private_variable(); // returns 1
Foo.get_private_function(); // returns 6

Btw, static classes like above are usually written in title case (Foo instead of foo) to differentiate them from regular objects or variables.