JS encapsulation issue: "this.foo = new function(){...};" vs "this.Bar = function(){..}; this.foo = new Bar();"

Question

Not entirely sure why one works and the other does not. Could someone please explain this? I'm new to JavaScript. I've been reading this guide so far.

This works. Data is considered to be a local variable of the _fSettings object.

ENTRANCE_APP._fSettings = function(){
    var data = new StorageObject('settings');
    /** The selected camera index. **/
    var cameraIndex = data.getValue('cameraIndex','0');
    this.setCameraIndex = function(index)   {cameraIndex = index;};
    this.getCameraIndex = function()    {return cameraIndex;};
};
ENTRANCE_APP.settings = new ENTRANCE_APP._fSettings();

But this does not? data is considered to be a global variable after that first declaration. So 'data.getValue(...)' treats data as a global variable.

ENTRANCE_APP.settings = new function(){
    var data = new StorageObject('settings');
    /** The selected camera index. **/
    var cameraIndex = data.getValue('cameraIndex','0');
    this.setCameraIndex = function(index)   {cameraIndex = index;};
    this.getCameraIndex = function()    {return cameraIndex;};
};

Answer 1

Try treating it as an IIFE like this:

ENTRANCE_APP.settings = new (function(){
    var data = new StorageObject('settings');
    /** The selected camera index. **/
    var cameraIndex = data.getValue('cameraIndex','0');
    this.setCameraIndex = function(index)   {cameraIndex = index;};
    this.getCameraIndex = function()    {return cameraIndex;};
})();

Notice the parentheses surrounding the function to create a function expression and the parentheses after it to invoke the function.