Can someone explain this OOP javascript structure

Question

Can someone explain this OOP javascript structure?

I realize it is how you create 'objects' in javascript, just need some explanation on the notation and what it means:

 var vote = function(){
     return {
            P1: function() {
                alert('P1');
            },

            P2: function() {
                alert('P2');
            }          

        };

    }();

    vote.P1();
    vote.P2();

1. Why are the public methods in the return call? How is this possible? Separated by commas?

2. Why does the end of the 'object' have to be (); ?

3. Naming convention for internal methods and public methods?

4. Are public properties and methods the same structure? What is the difference?

Answer 1

var vote = function(){
    var privateMember = 3; // lets define a private member, this will only be available inside the function scope, so we can't do "vote.privateMember" because we're not returning it below

    // It's returning an object, {}
    // these are considered public because they are returned by the function, making them available outside the function scope using the "dot" operator, "vote.P1()"
    return {
        // first value of the object is a function
        // so we can call this like "vote.P1()"
        // we're calling a privateMember in here
        P1: function() {
            alert('P1');
            alert(privateMember);
        },
        // second value of the object is a function
        // so we can call this like "vote.P2()"
        P2: function() {
            alert('P2');
        }          
    };
}(); // () means it will execute the function, so "vote" will store the return value of this function, it's a shorthand for `var vote = function(){}; vote = vote();

Naming convention for private methods is usually to put an underscore before the method/property name _privateMethod: function(){}.

Answer 2

This is JSON (javascript object notations). It's similar to dictionary format in python.

Arrays can be defined inline using

[1,2,3,4,5]

and objects can be defined inline using

{ field1: value1, field2: value2, field3: value3 }

A function can be defined inline too,

var a = function() { .... } //a is a function

The () after the function is used to call the function immediately after its definition! Because the function is defined inline, it's like saying:

x = function() { ... }
y = x();

but condensed as:

y = function(){...} ();

As far as I know, there's no public or private, it's all public, and functions are no different from variables, it's just that their type is a function.

Answer 3

1. It's returning the object/hash. Notice that right after the return is a { which is the beginning of the object/hash.

2. to run the anonymous function that returns the object.

3. I don't know what you mean.

4. Yes they are the same. A property can be a function because javascript has first class functions.

This code is contrived so it's hard to say anything useful about it. I'm not sure what the authors intent was. It looks like he may have been aiming to create a class like thing, as opposed to the way javascript does prototype based OO. This code could have just as easily been written.

var vote = {

        P1: function() {
            alert('P1');


        },

        P2: function() {
            alert('P2');
        }          

    };

Answer 4

Three important concepts: anonymous functions, object literals, closure.

Anonymous Functions

You can declare and execute a function without assigning it to a variable. In you example, foo isn't a function, it's the result of calling:

var item = function(){

}(); <- Because the function is being executed, item is the object the function returned, not the function.

Object Literals

Say you did this: var a = new Object(); a.foo = 'bar'; Object literal notation would look like this: var a = {foo: 'bar'};

In you example, your anonymous function is returning a new object with two functions, P1 and P2. It's just a different notation for specifying objects.

Closure

When a function returns an object, that object retains access to the functions scope - this is called a closure. So, if you do this:

var a = function(){ var _pvt = 'foo'; return { aFunc: function(){alert(_pvt);} }; }(); a.aFunc();

_pvt's scope is the anonymous function. This function returns a new object with one method (aFunc). The anonymous function's scope is available to this object through closure, so when a.aFunc() is called, _pvt will be available.

Best place to learn about this is the Douglas Crockford videos on YUI Theater: http://video.yahoo.com/watch/111585/1027823