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

The first one could be considered a static class, eg 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.

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

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.