CODEWITHSUNDEEP
javascriptjquery
Tim Tom
Tim Tom

Reputation: 2162

What is the difference between these 2 javascript?

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?

Upvotes: 1

Views: 101

Answers (3)

Imp
Imp

Reputation: 8609

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.

Upvotes: 2

Ja͢ck
Ja͢ck

Reputation: 173662

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.

Upvotes: 2

zerkms
zerkms

Reputation: 255155

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 (

Upvotes: 2

Related Questions